おすすめのアイコンCSSのFontAwesome【現役エンジニアが解説】
今回は、おすすめのアイコン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倍で表示しています。