Springfalfal

【サイト表示速度向上】FontAwesomeでアイコンを表示〜インストール編〜

instagramアイコン fontawesome

今回はFont AwesomeをCDNで利用するのではなく、

あなたのサイトにインストールして使用することで、

サイト表示の際に外部に接続することなくフォントを適用し、レンダリングブロック時間を短縮し、サイト読み込みを早くするための方法を紹介します。

サイトの表示時間は2.5秒以上で離脱率が急激に上がることが知られているので

SEOの一つの基準をクリアするためにはとても大きな違いが生まれます。

CDNとインストールの違い

一言で言うと、

「ファイルを外部のサーバーから借りてくる（CDN）」か、

「自分のプロジェクト内に所有する（インストール）」かの違いです。

CDN (Content Delivery Network)とは？

インターネット上にある、配信専用の高速なサーバー（CDN）に配置されているファイルのURLをHTMLに記述して読み込む方法です。

イメージ： 必要な時に、毎回外部の図書館から本をWeb経由で参照する。

インストール (ダウンロード / ローカル配置)とは？

公式サイトからファイルを直接ダウンロードし、

自分のパソコン（プロジェクトのフォルダ内）にファイルを保存して読み込む方法です。

イメージ： 本を購入して自分の本棚（フォルダ）に置き、そこからいつでも読めるようにする。

表示速度の違い

CDNでも表示速度が遅いと感じることは少ないかもしれません。

ただ、サイト全体の表示速度を極限までチューニングするプロの現場や、

WordPressの自作テーマでファイルを1つにまとめて管理したい場合は、

ローカルにインストールした上で、サイト丸ごと自前のCDN（Cloudflareなど）のキャッシュに乗せる

というアプローチが最強の速度を生み出すため、最終的なステップとしてはこちらがよく使われます。

特に、Font Awesomeだけでなく様々なCDNを利用する場合、

外部サーバーへの接続回数が多くなります。

その際に全て自分のサーバーにインストールしていると外部サーバーへの接続回数を劇的に減らせます。

Font Awesomeをインストールする

Font Awesomeダウンロードページにアクセスする

Font Awesome

インストール

ダウンロードサイトにアクセスしたら、

【Font Awesome Free】

　【Download Free for Web】をクリックします。

すると自動的にダウンロードが始まるので、ダウンロードの完了を待ちます。

font awesome　ダウンロード画面

実際に使用するファイル

インストールしたフォルダを開くと様々なファイルが入っていますので、

複雑そうに感じるかもしれません。

ただ、実際に使用するのは次の２つのファイル・フォルダになります。

・【css】フォルダ内の【all.min.css】ファイル

・【webfonts】フォルダ一式

font awesome　ダウンロードフォルダから使用するフォルダを示した画面
font awesome　cssフォルダから使用するファイルを示した画面

使用するファイルをサイトに保存する

・【css】フォルダ内の【all.min.css】ファイル

・【webfonts】フォルダ一式

この２つをサイトフォルダに保存します。

保存する際は、次のような位置関係になるように気をつけてください。

【all.min.css】の一つ上の階層に【webfonts】フォルダ一式を配置

例えば以下のような構成になります。

root
|___【index.html】
|___css
|___【style.css】
|___【all.min.css】
|___webfonts
|___【fa-brands-400.woff2】
　　　　|___【fa-regular-400.woff2】
　　　　|___【fa-solid-900.woff2】
　　　 |___【fa-v4compatibility.woff2】

このルールさえ守ればあとは、簡単にフォントを使用することができます。

アイコンを探す

Font Awesomeにアクセスする

Font Awesome

使用したいアイコンを探す

Font Awesomeにアクセスできたらトップページ中央に検索欄が表示されます。

この検索欄に使用したいアイコン名を入力します。

font awesome　トップページ検索欄を示した画面

今回はinstagramアイコンを検索します。

検索結果画面にinstagramに関連するアイコンが表示されるので、

この中から使用したいアイコンを選択します。（プロの表示があるものは有料です。）

font awesome 検索結果画面

アイコンをサイトに表示する

アイコンを選択すると、アイコン詳細ページに移動します。

画面左に表示されるアイコン、

画面右にアイコンを使用するためのコードが表示されます。

このコードをコピーして自分のHTMLに貼り付けるだけで

いつでもアイコンを表示させることができます。

font awesome　アイコン詳細ページ画面

アイコンの大きさを変える

FontAwesomeでは、アイコンの大きさを簡単に変えることができます。

以下のコードをi class="〜"内に書くことでサイズを大きくすることができます。

  • fa-lg (1.333…倍)
  • fa-2x (2倍)
  • fa-3x (3倍)
  • fa-4x (4倍)
  • fa-5x (5倍)

実際にコードを書いてみます。

<p><i class="fa-brands fa-instagram fa-lg"></i></p>
<p><i class="fa-brands fa-instagram fa-2x"></i></p>
<p><i class="fa-brands fa-instagram fa-3x"></i></p>
<p><i class="fa-brands fa-instagram fa-4x"></i></p>
<p><i class="fa-brands fa-instagram fa-5x"></i></p>

その他のサイズにしたいときは

上の5つのサイズ以外にしたい場合は自分の好きな名前のclassを追加して、

そのclassに対してCSSでサイズ指定しましょう。

<p><i class="fas fa-bomb my-small"></i></p>
<p><i class="fas fa-bomb my-big"></i></p>

.my-small {
  font-size: 0.8em 
  /*0.8倍の大きさに*/}
.my-big {
  font-size: 6em 
  /*6倍の大きさに*/}

アイコンの色を変える

【HTML】<i class="fa-brands fa-instagram my-example"></i>

【CSS】 .my-example {color: ◯◯}

アイコンの色を変えるときには、

iタグに好きな名前のclassを追加し、

それに対してCSSで色を指定します。

たとえば以下のように書きます。

<i class="fa-brands fa-instagram my-gray"></i>
<i class="fa-brands fa-instagram my-skyblue"></i>
<i class="fa-brands fa-instagram my-orange"></i>
.my-gray {color: gray}
.my-skyblue {color: skyblue}
.my-orange {color: #fecb81}

おまけ（色々なカスタマイズ）

回転させる（アニメーション）

<i class="fas fa-tasks fa-spin"></i>

fa-spinというclass名を追加するだけでアイコンをくるくると回すことができます。

<i class="far fa-lemon-o fa-spin"></i>
<i class="fas fa-cog fa-spin"></i>

アイコンを線で囲う

<i class="fas fa-tasks fa-border"></i>

classにfa-borderを足すとアイコンまわりに線をひくことができます。

<i class="fas fa-tasks fa-2x fa-border"></i>

アイコンを重ねる

二つのアイコンを前後に重ねて表示することもできます。

<span class="fa-stack">
<i class="fas fa-cloud fa-stack-2x"></i>
<i class="fa-brands fa-instagram fa-stack-1x"></i>
</span>

  • class名をfa-stackと設定したspanタグの中に、２つのアイコンを入れる
  • 背面のアイコンをはじめに書き、class名にfa-stack-2xを追加
  • 次に前面のアイコンを書き、class名にfa-stack-1xを追加

アニメーション一覧

最後に「Font Awesome Animation」により表現できる動きをまとめました。

動きclass名コード例
レンチ風faa-wrench animated<i class="fab fa-twitter faa-wrench animated"></i>
ブルブルfaa-ring animated<i class="fas fa-bus faa-ring animated" ></i>
横揺れfaa-horizontal animated<i class="fas fa-male faa-horizontal animated"></i>
縦揺れfaa-vertical animated<i class="fas fa-futbol-o faa-vertical animated"></i>
点滅faa-flash animated<i class="fas fa-star faa-flash animated"></i>
跳ねfaa-bounce animated<i class="fas fa-music faa-bounce animated"></i>
スピンfaa-spin animated<i class="fas fa-refresh faa-spin animated"></i>
浮遊faa-float animated<i class="fas fa-ship faa-float animated"></i>
パルスfaa-pulse animated<i class="fas fa-heart faa-pulse animated"></i>
シェイクfaa-shake animated<i class="fas fa-facebook faa-shake animated"></i>
ジャジャーンfaa-tada animated<i class="fas fa-plane faa-tada animated"></i>
 通過faa-passing animated<i class="fas fa-bicycle faa-passing animated"></i>
 バックfaa-passing-reverse animated<i class="fas fa-bicycle faa-passing-reverse animated"></i>
バーストfaa-burst animated<i class="fas fa-bomb faa-burst animated"></i>

これら以外にもたくさんの使用方法があるので

興味がある方は調べてみてください！

また、表示速度にそこまでこだわらない方はCDNを用いたもっと簡単な使用方法を紹介していますので、

そちらをチェックしてみてください！

学習記録一覧へ

Automation

関連記事