最近、地元のマタニティウェアショップから依頼されたサイト制作で初めてアイコンフォントというものを使ってみたのですが、なかなか使い勝手が良かったので、今後の覚書ということでまとめてみました。
アイコンフォント（シンボルフォントとか言い方は幾つかあるよう）とは、Webサイトなどでよく使われるアイコンのセットをフォントとして使えるようにしたもののことです。
画像アイコンとは違ってベクター形式なので画面の解像度によらずきれいに表示されることや、cssで色、サイズなどを調整できるメリットがあります。
今回アイコンフォントを探してみて、商用利用も自由な無料のものでもかなり充実した内容のものがあるな～という感じでした。アイコンって探し始めると本当にあっという間に時間が過ぎて行ってしまいますが、今後はアイコンを探す手間も減るんじゃないかなと期待^^
ちなみに、Wordpressブログでアイコンフォントを使いたい場合も、ちょっとした設定だけで利用できるようになりますので、ぜひこの記事を参考に使ってみてください。記事の後半では、アイコンフォントをサイトで利用するときに便利なWebサービスも二つ、使い方も併せて紹介していきます！
初めての利用におススメなアイコンフォントFontAwesome
商用利用にもライセンス表記なしで自由に使える無料のアイコンフォントです（ライセンスの詳細はこちらを確認）。479個（記事執筆時）のシンプルで使いやすいアイコンが揃っていて、取りあえずこれがあれば事は足りるという感じの定番アイコンフォント。以下、使い方の手順です。
フォントを利用するHTMLで読み込む
まずはFontAwesomeのフォントを、自分のプロジェクト（サイト）のHTMLで読み込めるように設定していきます。方法は二つあって、フォントファイルをダウンロードせずに本家サイト（BootstrapCDN）から読み込む方法と、フォントファイルをダウンロードして自分のプロジェクト内に設置する方法があります。好きなほうを利用してください。
方法１．ダウンロードしないでBootstrapCDNからCSSを読み込む
以下のコードをHTMLファイルのheader内にコピペするだけでOK。
|
1 |
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> |
参考http://fontawesome.io/get-started/
方法２．フォントファイルをダウンロードして利用する
公式サイトにアクセスします。ダウンロードボタンが分かりやすい位置に表示されているのでクリックしてダウンロードを開始。
ダウンロードしたzipファイルを解凍。以下のような構成になっています。
cssフォルダ内のいずれかのファイル（推奨：font-awesome.min.css）とfontフォルダ内の全てファイルを自分のサイトのcssフォルダとfontフォルダにそれぞれコピーします。
注：cssとfontフォルダは同じ階層にあるようにしてください。
フォントを利用するHTMLを開き、header内で以下のようにコピーしたcssファイルを読み込みます。
|
1 |
<link href="css/font-awesome.min.css" rel="stylesheet"> |
※href=””内は自分のサイトの構成に合わせて適宜変更
ここまででフォントの読み込み設定が完了です。では実際にサイト内にアイコンを配置しましょう。
サイトにアイコンを配置
公式サイトにアイコンの一覧があるので以下よりアクセスします。
http://fortawesome.github.io/Font-Awesome/icons/
ずら～～っと並んでいますね^^; 使いたいアイコンが見つかったらクリックします。
すると、選択したアイコンのタグが表示されますのでコピーします。
HTML内に貼り付けます。
こんな感じにボタンに使ってみました。
アイコンのスタイルを変更するのに既に用意されたcssクラスも併せてチェックしておくと役立ちそうですね。
http://fontawesome.io/examples/
WordPressでFont Awesomeを使う設定
WordPressに何かの機能を追加するとなると、ついついプラグインを使う方向に頭が向いてしまいますが、今回はプラグインは使いわない方法でやってみました。
（実は、使おうとしたんですが、どれもうまく動作しなかったんです・・・。Worpress本体のバージョンとの互換性が微妙だったよう）
プラグインを使わずにFont Awesomeを導入する方法はいくつかあるようですが、私はfunction.phpに以下のコードを追加する方法にしてみました。
参考Add Font Awesome Icons To WordPress
ダッシュボードで外観>テーマ編集の画面に行き、function.phpを開き、以下のコードを追加してください。
|
1 2 3 4 5 |
add_action( 'wp_enqueue_scripts', 'webendev_load_font_awesome', 99 ); function webendev_load_font_awesome() { if ( ! is_admin() ) { wp_enqueue_style( 'font-awesome', '//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css', null, '4.2.0' );} } |
※4.2.0の部分は公式サイトに表示されている最新バージョンに合わせると、最新のアイコンが使えます。
function.phpを保存したら、あとは、投稿画面のテキストモードで、必要な場所にiタグを設置すればOK。
例） <i class=”fa fa-angellist”></i> ⇒
簡単ですね
iタグに記述する各アイコンのクラス名は前述のようにサイトで確認してください。
このブログでは記事タイトルの先頭にあるマークを画像からアイコンフォントに変更しました。
Before： スマホなど画面幅の狭い画面で見た場合にタイトルが縦長になってしまっていました。
After：幅が狭くなっても改行が少なく見やすくなったかなと思います。色の変更とかもCSSだけで調整できるのもいいです。
March.15.2015追記：ブログデザインのカスタマイズに伴って上記のような記事タイトルの先頭のマークは消えました。代わりにFontAwesomeを使ってShareボタンやFollowボタンを表示させたり、グローバルメニューにもアイコンを表示させています。
さてここまではFont Awesomeというアイコンフォントのみの利用方法でしたが、それ以外にもフリーで使えるアイコンフォントは幾つも存在します。
そんなアイコンフォントのなかから好きなもの利用したいという場合に役立つサービスを二つご紹介します。
複数のアイコンフォントを簡単な設定で使えるWebサービスWE LOVE ICON FONTS
FontAwesomeを含め、幾つかのアイコンフォント（すべて無料かつオープンソース）を使いたいという時に便利そうなWebサービスを見つけました。ファイルのダウンロード不要でさくっと設定して使えます。
サイトにアクセスhttp://weloveiconfonts.com/
表示されているフォントの中から使いたいものをAddをクリックして追加します。
ページの下のほうにスクロールすると、Use selected font(s)というセクションがありますので、そこに表示された内容をコピーして、自分のサイトのcss内に貼り付ければ、フォントの読み込み設定が完了です。
例）typiconsとzocialという二つのフォントを選んだ場合
次に使いたいアイコンをサイト内で選んでクリックし、ページ下に現れるアイコンのクラス名をコピーし以下のようにspanタグで設定すればOKです。
例）Zocialフォントのdribbbleを選ぶ場合 <span class=”zocial-dribbble”></span>
使いたいアイコンだけを選んで一つのフォントファイルにしてくれるサービスFontello
前述のサービスとは違って、cssやアイコンファイルをダウンロードして使うタイプのサービスですが、かなり使えそうです。幾つものアイコンフォントの中から、自分が使いたいアイコン（フォントではなく）だけを選ぶことができ、しかも選んだアイコンだけを新たなフォントとしてまとめなおしてくれるんです。
数あるアイコンの中でも実際に一つのサイト内で使うものは限られていますし、ファイルサイズを最小限に抑えながら自分の好きなアイコンをセットにできるのはありがたいですね。
サイトにアクセスhttp://fontello.com/
一覧の中から使いたいアイコンをクリックして選んできます。 
アイコンを選んだらページ右上のDownload Webfontをクリックしてファイルをダウンロードしましょう。
※ボタンのカッコ内は選んだアイコンの数です。
ファイルを解凍すると以下のような構成になっています。
- cssフォルダ ： cssファイルがあります。
- fontフォルダ ： fontファイルがあります。
- config.json ： このファイルをfontelloサイト内でImport（レンチボタン内の機能）して作業を継続できます。
- demo.html ： ダウンロードしたアイコンとそのクラス名を確認できます。
- README.txt ： 使い方と注意事項。
- LICENSE.txt ： アイコンのライセンスを確認しておきましょう。
使い方は、css、fontフォルダを自分のプロジェクト内に追加し、cssフォルダ内のファイルをHTML内で読み込みます。
基本的には以下の二つのcssファイルを読み込めばOKです。
|
1 2 |
<link rel="stylesheet" href="css/fontello.css"> <link rel="stylesheet" href="css/animation.css"><!--[if IE 7]><link rel="stylesheet" href="css/fontello-ie7.css"><![endif]--> |
その他のcssファイルは必要に応じて利用してください（README.txtを参照）
アイコンはiタグのクラスにアイコン名を設定して利用します。自分が選んだアイコンの一覧とクラス名はdemo.htmlを見ると確認できますよ。
例） <i class=”icon-home-outline”></i>
