Font Awesome 5の使い方

Font Awesomeとは

Font Awesomeの読み方は「フォントオーサム」です。

Font Awesomeとは文字(フォント)として扱えるアイコン(小さい図形)のライブラリです。

膨大なアイコンを文字と同じ方法(色、サイズ、回転など)で簡単に表示できます。

まず、Get Started with Font AwesomeでFont Awesomeのアカウントを作成します。

Font Awesomeにサインインし「Kits」をクリックします。

「Settings」をクリックします。

「Set Up」タブをクリックし、コピーボタンをクリックしてscriptをコピーします。

コピーしたscriptをウェブサイトのheadタグ内に貼り付けます。

Font Awesome 5の検索ページを開き、「Free」をクリック(無料版の場合のみ)して使いたいアイコンを探します。

日本語は未対応のため検索キーワードは英語で入力する必要があります。

HTMLコードをクリックしてコピーします(下図の「Solid」の箇所を変更してしまうと無料版では未対応のHTMLがコピーされるため、注意が必要です)。

コピーしたHTMLをウェブページに貼り付けます。

HTML	表示
<i class=”fas fa-truck-monster”></i>

通常のフォントと同様、color属性で色を指定します。

HTML	表示
<i class=”fas fa-truck-monster” style="color:red;"></i>
<i class=”fas fa-truck-monster” style="color:blue;"></i>

通常のフォントと同様、font-size属性でサイズを指定します。

「fa-XX」でもサイズ指定できます。

HTML	表示
<i class=”fas fa-truck-monster” style="font-size:2em;"></i>
<i class=”fas fa-truck-monster fa-xs“></i>
<i class=”fas fa-truck-monster fa-sm“></i>
<i class=”fas fa-truck-monster fa-lg“></i>
<i class=”fas fa-truck-monster fa-2x“></i>
<i class=”fas fa-truck-monster fa-3x“></i>
<i class=”fas fa-truck-monster fa-4x“></i>
<i class=”fas fa-truck-monster fa-5x“></i>

Font Awesomeのアイコンは標準では横幅が統一されていません。

アイコンの横幅を統一するには「fa-fw」を指定します。

HTML	表示
<i class="fas fa-teeth"></i>横幅が広いアイコン	横幅が広いアイコン
<i class="fas fa-ruler-vertical"></i>横幅が狭いアイコン	横幅が狭いアイコン
<i class="fas fa-teeth fa-fw"></i>横幅が広いアイコン	横幅が広いアイコン
<i class="fas fa-ruler-vertical fa-fw"></i>横幅が狭いアイコン	横幅が狭いアイコン

HTML	表示
<i class=”fas fa-truck-monster fa-rotate-90“></i>
<i class=”fas fa-truck-monster fa-rotate-180“></i>
<i class=”fas fa-truck-monster fa-rotate-270“></i>

HTML	表示
<i class=”fas fa-truck-monster fa-flip-horizotal“></i>
<i class=”fas fa-truck-monster fa-flip-vertical“></i>

Font Awesomeのアイコンをリスト(ul要素)のマーカーにするにはulタグのclassに「fa-ul」、アイコンを「fa-li」を指定したspan要素で囲みます。

HTML	表示
<ul class="fa-ul"> <li><span class="fa-li"><i class="fas fa-yin-yang"></i></span>yin-yang</li> <li><span class="fa-li"><i class="fas fa-wrench"></i></span>wrench</li> <li><span class="fa-li"><i class="fas fa-x-ray"></i></span>ray</li> </ul>	yin-yang wrench x-ray