WordPress備忘録　Font Awesome をグローバルメニューや新着記事のリストで使う！

Webページを見ていると、あちこちで見かけるのが、下のような様々なアイコンです。まあ、見てる分にはいいんですけど、実際に自分でWebページを作る時に、僕は、昔からこのアイコンにえらく悩みました。そもそも、センスのいいアイコンなんか僕には作れませんから・・・。(^^;

カメラ　コメント　ホーム　Loading…　フラッグ　銀行

そうこうしているうちに、世の中には、フリーで使える、こういったアイコン画像をアップしてくれるサイトなんかも出てきました。自分で考えて作らなくてよくなっただけでも、随分、楽にはなりましたけど、実際にはめ込んでから、やっぱり色が合わないとか、大きさが違うとか、その都度、グラフィックソフトで、画像をいじらなければならず、めんどくさい事、この上なく、Webページを作る上で、最も嫌いな要素の一つでした。

それが、今では、Font Awesome なんていう、Web上でよく利用するアイコンを、画像ではなく文字として表示できるフォントセットにしたものを提供してくれるサイトが出てきたりして、便利になったものです。アイコンを文字として扱えるから、色や大きさを変えたりってのが、画像をいちいち、いじっていた事を考えれば、とっても楽ちんです。まさに、Awesome!!(^^)

導入も簡単で、一般的な導入方法を下記のページで丁寧に解説してくれていたので、よければ見てみて下さい。

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

上記のページにも書かれていますが、もちろんダウンロードして自分の使ってるサーバーにアップロードして、font-awesome.min.css をページに読み込んでもらってもいいんですけど、特にこだわりがなければ、BootstrapCDNのFont Awesome から読み込んでもらうのが楽でいいと思います。

その場合は、以下を<head>～</head>内に書き込んでもらうだけです。

	<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">

あとはアイコンを表示させたい場所に、以下のような感じで書き込みます。

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

ちなみに、これを表示させると「 fa-flag」こんな感じになります。
アイコンの種類を変える場合は、Font Awesome の Icons ページで、お好みのアイコンを見つけて、上記の「fa-flag」部分を、お好みのものに変えてもらえばいいだけす。

あとは、これをCSSを使って、大きくしたり、色を変えたり、位置を調整したりって感じですね。上記の解説ページや、Font Awesome の Examples ページには、アイコンの大きさを変えたり、回転、囲み等のCSSが予め用意されているので、それを利用するのもいいかと思います。これで、メニューや見出しのアイコンに悩まずに済みそうですよね！！(^^)

WordPress での Font Awesome の利用

記事の本文中で使う場合は、上記と同じように、header.phpの<head>～</head>内に、font-awesome.min.cssを読み込んで、アイコンを表示させたい場所に、上記と同じように書き込むだけです。もっとも、WordPressだと、「Font Awesome Icons」なんていうプラグインもあるみたいで、ショートコードも使えるみたいだし、そっちを使っちゃった方が楽かもしれませんけど・・・。
以下のページにFont Awesome Iconsの分かりやすい解説がありましたので、見てみて下さい。

記事の本文中にウェブアイコンフォントを使用できるWordPressプラグイン「Font Awesome Icons」

じゃあ、グローバールメニューとかでは、どうやって使えばいいのかと思ったら、さすがWordPress！って感じで、これも、Font Awesome 4 Menusっていうプラグインがあるみたいです。
こちらも、以下のページに分かりやすい解説がありましたので、見てみて下さい。

WordPressのグローバルナビメニューにFont Awesomeのアイコンフォントを表示させる方法

さらに、例えばサイドバーの新着記事とか月別のアーカイブとかで、Font Awesomeを使うには？
って思うわけで、そうなると、さすがに、プラグインじゃなくて、手動設定かと思うので、そのやり方を書いてみます。ようは、スタイルシートに「:before」とか「:after」の疑似要素を使って、入れてやるって感じです。

例えば、新着記事の各項目の前に、入れてやる場合

#recent-posts-2 ul{padding-left: 0; margin-left: 0; list-style-type: none;}
#recent-posts-2 li:before{content:"\f000";font-family:'FontAwesome'; margin-right:10px; color:#088f15}

上記のulやliの手前の部分は、それぞれの項目で確認して下さいね。
marginやpadding、colorはお好みで！
「list-style-type: none」は、リストの手前に出る黒丸を非表示にしています。

ここで肝心なのが、「content:”＼f000″」の部分です。f000は Font Awesome の指定なんですけど、この部分はUnicode です。「＼」もUnicode で、WordPressのCSSの編集画面で半角の「\」を入力すれば表示されます。

Font Awesome のUnicode の確認は、Font Awesome の Icons ページで、お好みのアイコンをクリックして開いて来たページで確認できます。下図の赤枠の中ですね。