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

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

2014/08/06
タグ: webフォント, 初心者

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

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

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

超お手軽な導入方法

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

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

ヘッダでCSSを読み込む

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

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

フォントの挿入方法

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

→http://fontawesome.io/icons/

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

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

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

fa-car

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

<i class="fa fa-car" style="color: green;font-size:3em"></i> fa-car カラー:グリーン/フォントサイズ:3em

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

スタイルバリエーション

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

アイコンサイズの変更

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

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x

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

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

<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>

アイコン幅を固定する

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

<ul class="fa-ul">
  <li><i class="fa fa-check-square fa-li"></i>can be used</li>
  <li><i class="fa fa-spinner fa-spin fa-li"></i>as bullets</li>
  <li><i class="fa fa-square fa-li"></i>in lists</li>
</ul>

• can be used
• as bullets
• in lists

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

自分のサーバにFont Awesomeをインストールする

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

フォントのアップロード

希望のバージョンをダウンロードします。

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

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

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

webフォントの使い方

HTML5+CSS3で注目度の高いwebフォントの使い方を紹介したいと思います。 ここでいうwebフォントはgoogleやモリサワのTypeSquareなどクラウドフォントサービスではなく、自前でサーバにフォントをアップロードして使うスタンダードな手法です。（ […]

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

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

@font-face {
  font-family:FontAwesome;
  src: url('http://xample.com/font/fontawesome-webfont.woff')format("woff"),
  url('http://xample.com/font/fontawesome-webfont.ttf') format("truetype"),
  url('http://xample.com/font/fontawesome-webfont.eot?') format("eot");
}
.FontAwesome{font-family: 'FontAwesome';}

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

次にフォントスタイルを指定します。
こちらはCSS上でフォントコードを指定する必要があります。
使用したいバージョンよりアイコンのコードを参照ください。
→Versions of Font Awesome

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

見出しのはじめに表示する

シンプルな見出しの先頭などでの使用を想定しています。

<style>
.icon:before { /* 要素の先頭 */
  font-family: 'FontAwesome';
  content:"\f13d";/* FontAwesomeフォントコード */
  color: #E44D26; /* アイコンの色 */
  margin-right :3px;/* アイコンと要素の空き調整 */
}
</style>
<h2 class="icon">見出しサンプル</h3>

リストメニューに使用する

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

<style>
ul#menu li:nth-child(1):before { /* リストの1番目の先頭 */
  font-family: 'FontAwesome';
  color: #E44D26; /* アイコンの色 */
  content:"\f015";/* FontAwesomeフォントコード */
  margin-right :3px;/* アイコンと要素の空きを調整 */
  display: inline-block;
  width: 1.2857142857142858em;/* アイコン幅を指定 */
  text-align: center;
  vertical-align: middle;
}
ul#menu li:nth-child(2):before { /* リストの2番目の先頭 */
  font-family: 'FontAwesome';
  color: #E44D26; /* アイコンの色 */
  content:"\f191";/* FontAwesomeフォントコード */
  margin-right :3px;/* アイコンと要素の空きを調整 */
  display: inline-block;
  width: 1.2857142857142858em;/* アイコン幅を指定 */
  text-align: center;
  vertical-align: middle;
}
ul#menu li:nth-child(3):before { /* リストの3番目の先頭 */
  font-family: 'FontAwesome';
  color: #E44D26; /* アイコンの色 */
  content:"\f058";/* FontAwesomeフォントコード */
  margin-right :3px;/* アイコンと要素の空きを調整 */
  display: inline-block;
  width: 1.2857142857142858em;/* アイコン幅を指定 */
  text-align: center;
  vertical-align: middle;
}
ul#menu li:nth-child(4):before { /* リストの4番目の先頭 */
  font-family: 'FontAwesome';
  color: #E44D26; /* アイコンの色 */
  content:"\f127";/* FontAwesomeフォントコード */
  margin-right :3px;/* アイコンと要素の空きを調整 */
  display: inline-block;
  width: 1.2857142857142858em;/* アイコン幅を指定 */
  text-align: center;
  vertical-align: middle;
}
</style>
<ul id="menu">
  <li><a href="#">メニュー1</a></li>
  <li><a href="#">メニュー2</a></li>
  <li><a href="#">メニュー3</a></li>
  <li><a href="#">メニュー4</a></li>
</ul>

まとめ

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

Font Awesomeは4.7.0というバージョンが登場しており、より多くのアイコンフォントが使用できるようになっていますね。

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