超簡単!アイコンフォント Font Awesomeの使い方

ひと昔前なら画像で表現していたようなアイコン。
ウェブフォントの登場によって、描画速度が速く手軽に挿入できるテキストフォントとして使用できるようになりました。

メニューや見出しなど、重宝するケースは非常に多いですよね。
もちろん、ウェブフォントですから、iPhoneやAndroidなどスマートフォンでもアイコン表示できます。

今回はフリーのアイコンフォントで有名どころのFont Awesomeの使い方についてまとめてみたいと思います。

超お手軽な導入方法

手軽に利用できるのが、Font Awesomeがアップされているサーバ上からウェブフォント&CSSを読み込んで使用するCDN版でほんとうに簡単な記述だけでアイコンフォントを表示できます。
裏返すとフォントの表示そのものがサーバ側に依存されることから、高負荷やトラブル時に自分でコントロールできないということになります。また、iタグを使ってインライン要素として表示するため、htmlソース上はあまり意味のない記述になってしまいます。

しかし、ヘッダーさえ編集できれば極端な話、無料ブログでも使えますし、何よりお手軽にアイコンフォントを使えるというメリットは大きいと思います。

ヘッダーでCSSを読み込む

Font Awesome用のCSSを読み込むために、htmlソースの<head>?</head>の間に下記の1行を追加します。(WordPressならばheader.php)

フォントの挿入方法

下記のFont Awesomeのサンプルページより、使いたいアイコンフォントをクリックします。

http://fontawesome.io/icons/

例として車のアイコンフォントを選択してみました。
タグが表示されますので、コピーして挿入したい場所にペーストします。
見出しやリストの先頭にも挿入することもできます。

アイコンフォントのタグを取得

アイコンフォントのタグを取得

fa-car

アイコンの色や大きさを変更する場合は下記のようにhtml上でスタイルを追加するのが手軽かと思います。

fa-car/カラー:グリーン/フォントサイズ:3em

スタイルバリエーション

上記でフォントサイズ指定を行いましたが、実はFont Awesomeのcssには様々なバリエーションのスタイルが用意されています。
クラスにフォント名+スタイルを加えることで、アイコンを装飾できます。

アイコンサイズの変更
フォントサイズはfa-lgからfa-5xまでの5パターンが用意されています。

fa-lg
fa-2x
fa-3x
fa-4x
fa-5x

アイコンの回転
スタイルfa-spinはアイコンを回転させることができます。


アイコン幅を固定する
等幅フォントではありませんので、リストなどに使用した場合は文字の先頭がずれてしまいます。
fa-liはフォントの幅を固定することでこれを揃えます。
メニューなどに使うパターンですね。

  • can be used
  • as bullets
  • in lists

その他、角度指定配置や回り込みなどいくつかのスタイルバリエーションが用意されています。

http://fontawesome.io/examples/

自分のサーバにフォントをインストールする

こちらは自サイトのサーバにフォントをアップロードする方法です。

フォントのアップロード

Font Awesomeトップページよりダウンロードします。
今回は自前でスタイル定義しますので、フォントデータのみアップします。
以下の5種類のフォントデータが用意されていますので、適時、必要なものをアップロードください。

fontawesome-webfont.otf
fontawesome-webfont.woff
fontawesome-webfont.ttf
fontawesome-webfont.eot
fontawesome-webfont.svg

わたしはウェブフォントではwoff・truetype・eotの3種類を使用しています。
webフォントの使い方

CSSでアイコンフォントを定義

まずはFont Awesomeをウェブフォントとして使用できるよう定義します。
例として、xample.comのルート直下のfontフォルダにアップロードします。

htmlソースでアイコンフォントを指定する

つぎにフォントスタイルを指定します。
こちらはCSS上でフォントコードを指定する必要があります。
使用したいアイコンのコードを参照ください。

Every Font Awesome 4.1.0 Icon, CSS Class, & Unicode

&#xは\となりますので、下記を参考にフォントコードを指定ください。
例1)[]→\f037
例2)[]→\f09a

見出しのはじめに表示する
シンプルな見出しの先頭などでの使用を想定しています。

見出しサンプル

リストメニューに使用する
こちらは実際に使用する機会が多そうなリストメニューでアイコンフォントを表示させます。
疑似クラスを使うため、シンプルなhtmlソースとなります。
CSSのポイントはテキスト先頭を揃えるために、フォントの幅を設定しているところです。(オリジナルのスタイルを参考にさせてもらっています)

まとめ

サーバにフォントをアップロードする場合は多少面倒ですが、メニューなどアイコンフォントを使用する範囲が限られる、またはソースをきちんと仕上げたい場合はスタイルシートを自前で用意しています。
逆に本文中にも都度挿入する場合は圧倒的にCDNの方が楽でが、わたしはケースバイケースで使い分けています。

いずれの方法でもiPhoneやAndroidなどのスマホでもきちんと表示できます。
この記事にはQRコードをつけましたので、ぜひスマートフォンでも表示確認してみてください。

ページ3327QR_Code

今注目の記事

WP子テーマの作り方
Contact Form 7の送信完了画面がでない

フォローする

WordPressとはなにかもう一度おさらいしてみよう!

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


二 × 2 =

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">