Font Awesome 5の使い方

Kits
 

Font Awesomeとは

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

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

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

Kitの設定

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

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

Kits

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

Kits

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

Quick Set Up for the Web

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

HTMLコードのコピー

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

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

Icons

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

HMTL

コピーした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

重ね合わせ

アイコンを重ねるには「fa-stack」を指定したspan内に「fa-stack-1x」(通常サイズ)か「fa-stack-2x」(2倍サイズ)を指定したアイコンを下から順番に記述します。

HTML 表示
<span class="fa-stack">
<i class="fas fa-camera fa-stack-1x"></i>
<i class="fas fa-ban fa-stack-2x" style="color:red;"></i>
</span>

コメント

タイトルとURLをコピーしました