アイコンをWebフォントとしてサーバに設置する

自分のサイト上でアイコンを表示したいとき、今まではアイコンの画像ファイルを貼り付けて表示させておりました。
しかし、画像を拡大すると画質が粗くなってしまいます。
また、MacBookProやiPadのRetinaディスプレイの登場によって通常の拡大率でも画像の場合は粗く表示されてしまいます。

これを解決するためにはどうすればよいでしょうか・・・

答えはWebフォントをアイコンとして用いるようにすることです。

アイコンをWebフォントで表示させられる有名なものとしてFont Awesomeがあります。
今回はこれを自前のサーバに設置して使用する方法を記します。

1.Font Awesomwのダウンロード
以下サイトよりFont Awesomwをダウンロードします。

2.サーバへの設置
ダウンロードしたZIPファイルを解凍します。
解凍すると、4つのフォルダが出現します。
今回はfontsとcssファイルを使用します。

これらのフォルダをサーバのPublicフォルダに設置します。

3.フォントをアイコンとして表示する

設置したら、public/fa/css/下のcssファイルをHTMLファイルでインポートします。
font-awesome.cssは通常サイズ、font-awesome.min.cssは小型サイズのフォントが定義されたCSSファイルです。

<link rel="stylesheet" href="fa/css/font-awesome.css" />

インポートしたら、iタグを表示させたい箇所に挿入します。

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

これで以下のように画像が表示されます。

アイコンを拡大させたい場合はfa-Nxを以下のようにclassに追加します。

<i class="fa fa-home fa-5x"></i>

これで以下のようにアイコンが拡大されます。

以上で導入は終わりです。
上記で紹介した以外にも多数のアイコンが用意されています。
TwitterやRSSロゴなども用意されています。
ぜひご検討されてみてはいかがでしょうか。

ftvlog