WEBアイコンフォント「Font Awesome」の使い方

WEBアイコンフォント「Font Awesome」の使い方

以前に「要素にエフェクトをかける「Creative Gooey Effects」の使い方」という記事を書きました。
「Creative Gooey Effects」とは、jQueryプラグインなわけですが、ここでSNSのアイコンを扱いました。
このアイコンの出力がこの「Font Awesome」によるものでしたので、今回、記事にしてアップすることにしました。

「Font Awesome」はアイコン画像をCSSで出力するフレームワークでして、画像を用意しなくてもWEBフォントがアイコンとして出力されるようになっています。
そのため、細かい画像を多数用意する必要なく、メジャーなアイコンを使うことが出来ます。
どれほどのアイコンが使えるのかは、後程記載致します。

以下が本家サイトです。
以下のサイトで諸々のファイルをダウンロードして頂けます。

• Font Awesome

phptemp_fa_160609.zip

「Font Awesome」を組み込んだページのサンプルです。

• 組み込み済みサンプル

組み込みサンプルでは「グローバルメニュー」と「PAGE TOP」の部分に入れました。

当サイト内の「SEOの基礎知識」の中のコンテンツです。

• コンテンツSEOのためのWEBサイトテンプレート（PHP）

組み込み手順は非常にシンプルです。

• 本家からマスター（2016/6/9現在）「font-awesome-4.6.3.zip」を落としてきます。
• その中の「/fonts/~」と「/css/font-awesome.css」をそれぞれアップし、アイコンを出力させたいページで「/css/font-awesome.css」を読み込ませます。
• htmlに必要記述を入れてください。

というだけで正常に表示されます。

本家から本体ファイル「font-awesome-4.6.3.zip」（2016/6/9現在）をダウンロードしてきます。
その中にある以下のファイルが必要になります。

• /css/font-awesome.css
• /fonts/~

それぞれのファイルを適宜アップして、アイコンを出力させたいページで「/css/font-awesome.css」を読み込ませてください。
事前準備はそれで終了です。

アイコンを出力する際には以下の記述をベースにオプションを記述するようになっています。
「***」はアイコンデータのclass名を入力してください。

<i class="fa fa-***"></i>

<i class="fa fa-*** fa-lg"></i>

という感じでオプションも多数あります。
それらの補足情報は以下のページでご確認をお願い致します。

• Examples

また、アイコンの種類については以下のページでご確認ください。

• The Icons

アイコンの種類をクリックして頂きますと、アイコンデータの詳細ページに遷移しますので、アイコン詳細ページでclassに入力すべきデータを調べてください。

ということで、それぞれの記述が出来ましたらそのままアップしてください。
特に問題なく表示されれば完了です。

WEBサイトテンプレート（PHP）の修正にあたって、以下の点に配慮しています。

• 今回、サンプルにしたWEBサイトテンプレート（PHP）は「 phptemp_160202.zip 」です。

ということで、動作確認しなければいけないような案件でもないので、楽に対応できたのではないでしょうか。

ただ、本件では少々気を付けないといけないことがあります。

昨今、Googleはモバイルフレンドリーということで、ページの表示速度を高めることを推奨しています。
本件では、アイコンデータをたびたび読み込むこともあり、PV数やページ数が多いところで何度も読み込みをすると、無駄にアイコンデータを読み込まなければいけないことになります。
転送量が増えてしまうと思いますし、時には表示が遅いときが出てくるかもしれません。

ページ数やコンテンツが多いと用意する画像も増えるため、面倒な手間が多いと思います。
そういう時に活躍するのが本件のようなフレームワークだと思うのですが、それがかえってデメリットになりうるかもしれません。

「Font Awesome」を使うことによって、どのような影響が出るのか分からないので明言は出来ないところですが、もし「Font Awesome」を使う場合には、TTFBのチェックなどはしておきたいところですね。

執筆 : 清水 隼斗

WEBアイコンフォント「Font Awesome」の使い方のAMPページ