Font Awesomeは、ウェブサイトで使えるアイコンフォント集です。Font Awesomeを使うには、基本は自分のサーバー上にアップロードすることになりますが、無料ブログを使っている場合にはできないかもしれませんし、いちいち自分のサーバーから読み込まれるのは避けたいことも多いです。
コンテンツデリバリーネットワーク（CDN）で、無料で使えるところが3か所あるので紹介していきます。
Font Awesome is AWESOME!!
Font Awesomeを使えば、結構かっこいいアイコンを無料で使うことが出来ます。現時点での最新バージョン4.3.0では519個のアイコンが登録されています。
フォントファイルもそれほど大きくなく、フォント本体とフォントの設定がかかれたCSSを合わせても100kbちょっと（ブラウザによってはもっと大きい）しかありません。
そして、滑らかに回転させたり（）、回したり（）できますし、色を変えたり角度を変えたり、重ねたり（+→）とかなり自由が効きます。
正にAwesome！（すごい！）
他にもウェブフォントで無料で使えるアイコンフォントはありますが、Font Awesomeが一番普及している気がします。
ちょっと変わったアイコンを使いたい場合には、他のものも併用しましょう。
CMSで使う場合
WordPressなどのCMSでは、プラグインが用意されていてインストールするだけで使えるように設定されていることが多いです。また、プラグインを使わなくてもテンプレートで既に使われていて、自分で設定しなくても使えることも多いです。
特に多く使われているのは、検索アイコン（）やメニューアイコン（）です。
WordPressの場合
WordPressの場合、Better Font Awesomeやその他のプラグインを使うと簡単に導入できます。
WordPressのプラグインを使った場合のメリットは、ショートコードを使うことで簡単に挿入できることですが、カスタマイズ性は若干落ちます。たとえば、上記の回転アイコンは簡単に使えますが重なるアイコンをショートコードで使うのは難しいです。
プラグインごとにショートコードの書式が若干違うので、乗り換えるときには「Search RegEx」などのプラグインを使って、書き換えする必要があります。
Joomlaの場合
WordPress以外に私が使っているCMSのJoomlaでは、無料で使える拡張機能はWordPressと比べるとほとんどなく、使えそうなものは「NS Font Awesome」くらいです。
また、ショートコードの仕組みがないわけではありませんが、WordPressほど使いやすくないので、直接HTMLに書き込むのが一番便利です。（書き込み自体はプリセットしておけばエディタ上のメニューからできます。）
エディタ上でもFont Awesomeを有効にしておけば、エディタで挿入されるアイコンを見ながら作業できるので、これはこれで良いと思います。
どちらかというと、テンプレートについてくることが多いので自分で導入するのは少ないかもしれません。
自分で導入する場合
何かが原因で自分で導入することになった場合、2つの選択肢があります。
自サバかCDNか
- サーバーにCSSファイルとフォントファイルを置いて、読み込む
- コンテンツデリバリーネットワーク（CDN）上に公開されたファイルを読む
それぞれメリットがありますが、CDNの方がメリットが大きく、お勧めです。
自分のサーバーに置く場合、自分で管理できるのでソースコードをいじったり、フォントのカスタマイズが可能です。
CDNから読む場合、自分のサーバー資源（保存容量、通信帯域）を使わずにFont Awesomeを使うことができるようになります。また、格安サーバーではCDNの方がほとんどの場合高速です。さらに、HTTPリクエストを複数サーバーに分散させることで高速化できます。（HTTPSを使ったSPDYの場合には分散させないほうが早いこともあるらしい）
使うためのコード
とても簡単で、
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
これを<head>…</head>内に張り付ければおしまいです。これだけですので、単に表示させるだけなら、プラグインを使うまでもないのです。
ダウンロードして自分のサーバーに置く場合には、自分のサーバー内のfont-awesome.min.cssに対してリンクを張ります。
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
font-awesome.min.css内では、../font/fontawesome-webfont.woffなどへさらに参照しているので、font-awesomeフォルダ内の構造をいじっている場合には、cssファイルも改訂が必要になります。
（参考コードは、いずれも公式サイトfontawesome.github.ioからのコピーです。）
CDNからのFont Awesome読み込み
CDNを使ったほうが一般的には読み込みが高速になります。理由は3つあります。
- 単純に読み込みが早い
- HTTPリクエストの分散効果がある
- 他のサイトでも使っていればブラウザキャッシュが効く
現在、Font Awesomeの公開CDNライブラリは私が知っているだけで3つあります。
MaxCDN
Font Awesome公式サイトで紹介されているBootstrapCDNのMaxCDNです。
MaxCDNは東京サーバーを持っているはずなのですが、公式サイトで紹介されているせいなのか、サーバーの性能なのか、読み込みが異常に遅いときが多々あります。
読み込みコードは、
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
です。
jsDelivr
Better Font Awesomeのプラグイン内で呼ばれているのが、このjsDelivrです。
速いことが多く、とてもお勧めです。このサービス自体が、CloudFlare、MaxCDN、KeyCDNなどのCDN合同で作られているので、一つのCDNに依存することなく高速化できるようです。
日本国内に4つもサーバーがあります。
使うためのコードは、
<link rel="stylesheet" href="//cdn.jsdelivr.net/fontawesome/4.3.0/css/font-awesome-ie7.css"> <link rel="stylesheet" href="//cdn.jsdelivr.net/fontawesome/4.3.0/css/font-awesome.css">
です。上のie7.cssは古いブラウザ互換性のためのファイルです。Better Font Awesomeプラグインでは読んでいなかったような気がします。
cdnjs（CloudFlare？）
もう一つが、cdnjsです。恐らく、すべてがCloudFlareのネットワーク上から呼ばれています。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
場合によっては、他にも読むべきコードがあるかもしれませんが、基本はこれでOKです。
他のCDNサービスでも同じですが、CSSは自前で用意してフォントファイルだけをCDNから読むこともできます。
お勧めCDN
MaxCDN以外の二つなら、大抵早いはずです。私はCloudFlareにサイトを載せているので、遅くなるなら一蓮托生でcdnjsが一番かなと思っていますが、jsdelivrも速いです。（中国大陸にも提携CDNがあるようです）
CDNのデメリット
それほどデメリットといえるものはありませんが、公式サイトで紹介されているMaxCDNは速いときもありますが、結構遅いことが多く、サイト表示速度計測サービスを使うと、その地点にサーバーがあるはずなのに、日本から読み込むよりも遅いことが頻繁にありました。
他の二つは、速いと思います。それでも時々待ち時間が出るようですが、そんなに頻繁ではないような印象です。
ウェブサイトでCDNを使っているなら、フォントファイル・CSSファイルともにCDNから読まれますので、それほどメリットはありませんが、初めて訪問する人でも以前に他のサイトで読んだキャッシュが残っていればそちらから使われるので、その分は高速になります。
既に使っているけど乗り換えたい場合
既にプラグインやテンプレートでFont Awesomeを読み込んでいるけれど、自分のサーバーから読むのを止めたい場合や、MaxCDNを読んでしまっているので変えたい場合があると思います。
私の場合はそうでした。
ソースコードを解読して何とかなる場合もありますが、そうはいかない場合もあります・・・。
一番簡単に変える方法は、自分のサーバーにある、font-awesome.min.css（もしくはfont-awesome.css）の参照しているサーバーを上記のCDNサーバーに書き換えることです。
次点は、自分で上記の<link…>コードを埋め込むとともに、自分のサーバーにあるfont-awesome.min.cssとfont-awesome.cssファイルの中身を空っぽにしておくことです。CSSを結合するプラグインを使っていれば、ファイルが読まれることもないので時間のロスがなくなります。
完璧を期すなら、ソースコードの書き換えですが、難易度が高いです。私は、テンプレート・フレームワーク内で読まれているところを探したのですが、断念しました。
上記コードを生成している箇所を探すのとともに、公式サイトで紹介されている、
@import "font-awesome-sprockets"; @import "font-awesome";
のような記述を作る場所を探していけば見つかるはずなのですが・・・。だいぶ面倒です。
WordPressなら、Font Awesomeプラグインを使うと既存の記述を上書きしてくれるようなので、プラグイン内を書き換えればなんとかなります。
コメント