Font Awesomeを使おう

Font Awesome5とは
Font Awesome5の使い方
1. サーバーにアップしてFont Awesome5を使う
2. CDNを使ってFont Awesome5を使う
使いたいアイコンを探そう
アイコンを表示させてみよう
その他

Font Awesome5とは

Font Awesomeで配布されているやなどのアイコンを表示させることができるアイコンフォント
画像ではなくテキストと同じ感覚で利用できる為、サイズや色など自由に設定できます。また、アイコンの種類も豊富なので様々な場所で使えます。

最新バージョンはFont Awesome5

2017年にFont Awesome5が登場。それ以前はFont Awesome4で使い方も若干かわりました。
Font Awesome5には無料版（Free）と有料版（Pro）があります。
アイコンの数は無料版が1,577個使えるのに対し、有料版は7,722個も使えます。(2020年2月現在）他にも有料版には様々な特典があります。Font Awesome5のプラン

料金は$99/年と高くなりましたが、個人使用だと無料版でも十分だと思います。

Font Awesome5の使い方

サーバーにアップしてFont Awesome5を使う

Download Font Awesome にある「Free for Web」をクリックしてダウンロード
解凍したファイルを任意のディレクトリにアップ
/css/all.cssまでのパスを<head>内に記述します

<link rel="stylesheet" href="./fontawesome/css/all.css">

CDNを使ってFont Awesome5を使う

2020年2月現在　CDNを使う場合はユーザー登録が必要になりました。
と、言ってもメールアドレス、パスワード、名前だけです。
全て英語ですが難しいことはありません。
[su_spoiler title=”画像付きで説明” open=”no” style=”default” icon=”plus” anchor=”” class=””]

	メールアドレスを入力
	するとこのようなメールが届くので「Resend Confirmation Email」をクリック
	ログイン用のパスワードを設定
	名前を入力下の２つは特になにもしなくても可
	アルファベットと数字が個人のコードになります

[/su_spoiler]　最後に表示される

<script src="https://kit.fontawesome.com/〇〇〇～.js" crossorigin="anonumous"></script>

を<head>内に記述します。

2020年2月現在 CDNを使ったCSSファイルの配布がなくなりました。

使いたいアイコンを探そう

Font Awesomeのアイコン一覧から使いたいアイコンを選びます。この時グレーアウトしているのはPro(有料）のみ使えます。無料で使えるのは色濃くなっているものだけです。
左側の「Free」にチェックをいれると無料で使えるものだけ表示されます。

アイコンを表示させてみよう

HTMLに書いて表示させる

　今回はのようなアイコンを表示させてみます。表示させたいアイコンを選ぶと

このようなページになるので上記の赤枠で囲んだコードを表示させたい所に張り付けるだけ。上記の場合だとiタグ(italic)なので若干変形します。

<span class="far fa-arrow-alt-circle-right fa-lg"></span>

サイズを変更してみよう

Font Awesome5には元々指定されたサイズあります。

<span class="far fa-arrow-alt-circle-right fa-sm"></span>
<span class="far fa-arrow-alt-circle-right fa-lg"></span>
<span class="far fa-arrow-alt-circle-right fa-2x"></span>
<span class="far fa-arrow-alt-circle-right fa-3x"></span>
<span class="far fa-arrow-alt-circle-right fa-5x"></span>
<span class="far fa-arrow-alt-circle-right fa-7x"></span>

上記は一部サイズだけですが他のサイズについてははSizing Iconsにあります
もちろん自分で好きなサイズを指定することもできます。

色を変えてみよう

色を変えるのはcolorを追加するだけ

<span class="far fa-arrow-alt-circle-right fa-2x" style="color:#ed5600"></span>
<span class="far fa-arrow-alt-circle-right fa-2x" style="color:#00722f"></span>
<span class="far fa-arrow-alt-circle-right fa-2x" style="color:#0063e5"></span>

CSSに書いて表示させる

CSSに書いて表示させるにはunicodeを使います。今回の例ですと「f35a」になります。　

<span class="test"></span>


.test::before{
         font-family:'Font Awesome 5 Free';
         content: "\f35a";
         font-size:1.3em;
         color: #6C9FCE;
         font-weight: 400; 
 }

font-familyの書き方に注意

CSSで表示させる場合、アイコンの種類によって「font-family」の値が変わります。
font-family:’ Font Awesome 5 Free’;　無料版で一般的な指定
font-family:’ Font Awesome 5 Pro’;　有料版（たまに無料版でも指定くることあるらしい）
font-family:’ Font Awesome 5 Brands’; 無料版、有料版にかかわらず「Brands」指定
やなどのアイコンはブランドアイコンになるので「Free」の部分を「Brands」にします。

アイコンが上手く表示されない方はこのいずれかを試してみてください。

※ちなみにFont Awesome4系は　font-family:’ FontAwesome’;になります。

styleの異なるアイコン

Font Awesome5には、Solid style、Regular style、Light style(Pro)、Duotone style(Pro)の4つのstyleがあります。
これらは同じアイコンで見た目が異なります。

HTMLで使い分ける

(Regular style) 　　 (Solid style)

<span class="far fa-arrow-alt-circle-right fa-2x" style="color:#ed5600"></span>
<span class="far fa-arrow-alt-circle-right fa-2x" style="color:#00722f"></span>
<span class="far fa-arrow-alt-circle-right fa-2x" style="color:#0063e5"></span>
<span class="fas fa-arrow-alt-circle-right fa-2x" style="color:#ed5600"></span>
<span class="fas fa-arrow-alt-circle-right fa-2x" style="color:#00722f"></span>
<span class="fas fa-arrow-alt-circle-right fa-2x" style="color:#0063e5"></span>

無料版だとRegular styleとSolid styleしか使えません
コードを見れば分かる通り「far」と「fas」の部分が違います
Proを契約した場合は更に「fal」と「fad」が使えます

CSSで使い分ける

テスト
テスト
テスト

テスト
テスト
テスト

<ul class="fa-tes">
 <li>テスト</li>
 <li>テスト</li>
 <li>テスト</li>
</ul>
<ul class="fa-tes2">
 <li>テスト</li>
 <li>テスト</li>
 <li>テスト</li>
</ul>


ul.fa-tes,
ul.fa-tes2
{
 list-style:none;
}
.fa-tes li:before{

  font-family: 'Font Awesome 5 Free';
  content: '\f35a';
  font-size:2em;
  color:#ed5600;
  font-weight:400;
}

.fa-tes2 li:before{
  font-family: 'Font Awesome 5 Free';
  content: '\f35a';
  font-size:2em;
  color:#00722f;
  font-weight:900;
}

font-weightの値

Regular styleは400、Solid styleは900
Light style(Pro)は300、Duotone style(Pro)は900

Font Awesome5の基本的な使い方（公式）

その他

基本的な使い方以外にも
アイコンの角度を変える方法
アイコンを回転させる（アニメーション）する方法
アイコンを重ねる方法

<span class="fab fa-twitter fa-rotate-90 fa-2x"></span>
<span class="fab fa-facebook fa-spin fa-2x"></span>
<span class="fa-stack fa-1x">
<l class="fas fa-square fa-stack-2x"></l>
<l class="fab fa-twitter fa-stack-1x fa-inverse"></l>
</span>

など、他にも色々あります。試してみてはいかがでしょう

今回は基本的なことしか紹介しませんが、またいつか応用的なことも紹介できたらと思います。

Font Awesome5を使おう