Webフォントでアイコンを表示する「Font Awesome」の使い方

アイコンを文字として表示する「Font Awesome」の使い方を紹介します。

Font AwesomeはCSS3の便利機能「Webフォント」を活用したプロジェクトです。アイコンを文字（ベクター情報）として扱うことで、スマホやタブレットなどで拡大縮小してもアイコンのギザギザが目立ちません。

400種類を超えるアイコンが利用可能な上に、アイコンのサイズ・文字色・背景色・影付けを簡単に設定できる優れもの。ぜひ使い方を覚えて、ご自身のブログなどで活用してみてください。

「Font Awesome」のセットアップは、ざっくり3ステップです。

以下、順を追って説明します。

「Font Awesome, the iconic font and CSS toolkit」にアクセスし、最新のFont Awesomeをダウンロードします。

ダウンロードしたファイルには「css」「fonts」「less」「scss」の4フォルダが含まれているはずです。

このうち「css」と「fonts」の2フォルダを自分のページにアップロードします。特に不都合がなければ、自身のWebページのトップディレクトリに配置するのが良いでしょう。

「less」「scss」は、CSSを使いこなしているヒト用のファイルです。今回は使いませんので、ソッとHDDの奥にしまっておきましょう。

アイコンを表示するページのHTMLを編集し、ヘッダ部に以下の記述を追加します。

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

上記の “path/to/font-awesome" 部分はご自身のWebサイトに併せて修正してください。たとえばこのブログの場合だと下記の記述になります。

<link rel="stylesheet" href="https://www.hide10.com/css/font-awesome.min.css">

以上でFont Awesomeが使えるようになりました！

「CDNってナニ？」という人は読み飛ばし推奨。

CDN経由で呼び出すことで、面倒な事前セットアップなしでFont Awesomeを利用可能だったりもします。

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

サイト負荷や高速化が気になる人は、CDN経由の呼び出しも検討してみてください。

Font Awesomeのセットアップが終わったら、実際にアイコンを呼び出して表示してみましょう。

Font Awesomeでアイコン表示を行うには、ざっくり3ステップが必要です。

以下、順を追って説明します。

「Font Awesome Icons」にアクセスして、使いたいアイコンを探します。

使いたいアイコンが見つかったら、そのアイコンをクリックしましょう。そのアイコンの表示例と、表示用コードのサンプルが表示されます。

ページ内にあるi要素のタグが表示用コードとなります。コードをコピペして、自身のブログのアイコン表示位置に挿入しましょう。

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

上記までで表示されたアイコンは、通常サイズの通常色で表示されていると思います。

これを変更するには、通常の文字と同様にCSSを利用して装飾します。

<p style="font-size: 64px; color: blue;"><i class="fa fa-facebook fa-fw"></i></p>

上記コードの表示例はこんな感じ。Facebookのアイコンが64ピクセル、青色で表示されていると思います。

もちろんクラス名を利用したCSS指定も可能です。お好みに併せてご利用ください。

上記表示例ではi要素を用いましたが、実際はクラス名に"fa"と"fa-xxxx"を指定することで、好みの要素でFont Awesomeを呼び出すことが可能です。

またアイコンの大きさや固定幅表示、回転など様々なアイコン加工もクラス名の追加だけで可能になっています。詳細はFont Awesome Examplesを参照してください。

まだ、コメントがありません