HOME > コラム > CSS Chips > WEBアイコンフォント「Font Awesome」の使い方

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

コラム

今回はWEBアイコンフォント「Font Awesome」の使い方を解説しようと思います。
使い方は物凄く簡単です。
JavaScriptやjQueryなどを使うわけではありません。
アイコンファイルとCSSファイルをアップして指定するだけで使えてしまいます。
使いどころがあったら迷わず使いたいところですね。
「ちょっとは役に立ったかな?」や「ちょっと面白いな(笑)」みたいなことを感じられましたら、シェアして頂けますと幸いです。

CSS Chipsに投稿したコラム記事

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

Font Awesomeサイトイメージ
Font Awesomeとは?

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

アイコン画像をCSSで出力するフレームワーク

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

本家サイト

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

ダウンロードと組み込みサンプル
Font Awesome組み込み済みファイルのダウンロード
phptemp_fa_160609.zip
組み込み済みサンプル

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

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

元になるWEBサイトテンプレート(PHP)について

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

組み込み手順

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

  • 本家からマスター(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」を読み込ませてください。
事前準備はそれで終了です。

必要なhtml記述について

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

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

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

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

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

全部のファイルをアップしてください

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

その他、補足

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

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

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

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

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

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

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

執筆 : 清水 隼斗

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

Facebookコメント

株式会社SEMラボラトリー
TEL : 06-4394-8427
MAIL : info@oosaka-web.jp
PAGE TOP