おすすめのアイコンCSSのFontAwesome【現役エンジニアが解説】

PROGRAM

今回は、おすすめのアイコンCSSのFontAwesomeについて、準備と使い方に分け、簡単に解説していきます。

準備

FontAwesomeのアイコンを使うには、CSSを読み込む必要があります。

公式ページからダウンロードしたもの、もしくはCDNのものをheadタグ内で読み込みます。

<link href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet">

上記のコードでは、FontAwesomeのCDNのアイコンのCSSファイルをlinkタグで読み込んでいます。

使い方

FontAwesomeのCSSを読み込めば、クラスを指定することでそのアイコンが使えます。

アイコンごとにクラスが割り振られていますので、アイコン一覧よりタグを取得して使います。

<i class="fab fa-amazon"></i>

上記のコードでは、FontAwesomeのFree版で読み込み可能なアマゾンのアイコンを表示しています。

サイズ変更

FontAwesomeのアイコンは、クラスを指定することでサイズを変えることも可能です。

fa-lgのクラスも付与するとデフォルトのサイズの1.33倍になり、fa-nxとするとn倍になります。

<p>1.33...倍<i class="fab fa-amazon fa-lg"></i></p>
<p>2倍<i class="fab fa-amazon fa-2x"></i></p>
<p>3倍<i class="fab fa-amazon fa-3x"></i></p>
<p>4倍<i class="fab fa-amazon fa-4x"></i></p>
<p>5倍<i class="fab fa-amazon fa-5x"></i></p>

上記のコードでは、FontAwesomeのアマゾンのアイコンを、それぞれデフォルトサイズの1.33…倍と2倍、3倍、4倍、5倍で表示しています。