アイコンを「画像」としてではなく「フォント」として表示させる「Webアイコンフォント」。

その中でも「Font Awesome(“フォント オーサム”と読む。オーサムは“すごい”とか“素敵”というような意味ですね)」が最近ではよく使われています。

当サイトではSEOに強いWordPressテンプレート「賢威」のバージョン7(スタンダード版)をカスタマイズしていますが、この「Font Awesome」を賢威7で実装する方法をご紹介します。

Font Awesomeの使い方が詳しいサイトをご紹介

Font Awesomeについての説明や詳細な使い方は以下のサイトが分かりやすいので、ご紹介します。

参考楽して便利!Webアイコンフォント『Font Awesome』の使い方と活用 Tips

賢威7でFont Awesomeを実装する方法

Font Awesomeファイルのダウンロード

Font AwesomeはCDNで利用することもできますが、今回はファイルをダウンロードして利用する方法をご紹介します。

CDNでの利用はリンクして使うだけなので簡単便利ですが、万が一、リンク先のサーバーが不調などで使えなくなる場合があるため、ひと手間発生しますが、ダウンロードしての利用をおすすめします。

ダウンロードはFont Awesomeのトップページ中央付近にある「Download」ボタンをクリックしてください。

Font Awesomeは不定期でバージョンアップするのですが、現在でしたら「font-awesome-4.5.0.zip」というファイルがダウンロードされます。

バージョンアップに対応した「font-awesome」フォルダの運用方法

このファイルを解凍後、私の場合は「font-awesome」というフォルダ名に変更します。

これはバージョンアップのたびにフォルダ名が変更になって、あとで変更するのが面倒だからです。

バージョンアップの際は、バージョンアップしたファイルをダウンロードして、「font-awesome」フォルダの中身を入れ替えれば後述する、font-awesomeのCSSを読み込ませる際に、パスを変更する必要がありません

なお、私の場合は、サイトのルートに「font」ディレクトリを作成して、そこに格納しています。

Font AwesomeのCSSを賢威7で読み込ませる方法

賢威7では、WordPressの管理画面で、左サイドバーにある「賢威の設定」から「賢威の設定」をクリックします。

デフォルトではしばらくスクロールして「</head>直前に挿入するコード記入欄」に

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

と入力することで、賢威7にFont AwesomeのCSSを読み込ませることができます。

なお、パスは当サイトの場合は、前述のようにルートに「font」ディレクトリを設置し、そこに「font-awesome」フォルダを格納しているので、このようになりますが、適宜ご自分の設置した環境に合わせて書き換えてください。

あとはHTML上やCSSでFont Awesomeが指定する記述をすれば、Webアイコンフォントが表示されます。