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

ヘッダ画像

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

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

メニューや見出しなど、重宝するケースは非常に多いですよね。
もちろん、ウェブフォントですから、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>

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

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フォルダにアップロードします。

@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上でフォントコードを指定する必要があります。
使用したいアイコンのコードを参照ください。

Every Font Awesome 4.7.0 Icon, CSS Class, & Unicode

&#xは\となりますので、下記を参考にフォントコードを指定ください。
例1)[&#xf037;]→\f037
例2)[&#xf09a;]→\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コードをつけましたので、ぜひスマートフォンでも表示確認してみてください。

ページ3327QR_Code

コメントを残す

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

関連記事

WordPressのログインユーザー名は丸見え!?

WordPressのセキュリティ対策で必ずいわれるのが、「ログインユーザー名をadmin以外に変更し […]

Contact Form 7の送信完了画面がでない

お手軽にお問い合わせフォームなどを設置できるContact Form 7 添付ファイルも送信でき、シ […]

3分で設置できる!?CSS3の角丸グラデーションボタン

CSS3と対応ブラウザの登場により、角丸やグラデーションを使ったリンクやフォームの送信ボタンが画像な […]

ブラウザの画像などが更新されない

WordPressをはじめ、サイト構築を行っていると変更が反映されない場合があります。 通常、Win […]