WordPress を使うようになって、遅ればせながら Font Awesome という便利なものがあることを知った。ちょっとしたアイコンを表示させるには、なかなか使い勝手がいい。Simplicity ならすでにテーマに組みこまれているので、適当に<span>タグか<i>タグを使って、
<span class="fa fa-forward"></span> 早送り 巻戻し <span class="fa fa-backward"></span>
と書けば、
早送り
巻戻し
と表示される。使いたいアイコンを Font Awesome のサイトで探して、そのアイコン名 xxx を class=”fa fa-xxx” で記述すればよい。
Font Awesome が組みこまれていないテーマ、あるいは静的 html でも、フォントデータをサイトにアップすれば使える。まず、Font Awesome のサイトから一式をダウンロードして解凍。その中から「fonts」フォルダと「css」フォルダをそのまま自分のサイトの適当なディレクトリ（/example としておく）に上げる。
このディレクトリと同じ階層に html ファイルを置いたとして、そこで Font Awesome を使うには、<head>部分に次の１文を入れ込んでおけばいい。
<link rel="stylesheet" href="example/css/font-awesome.min.css">
あとはページ中で先と同じように記述するだけ。詳しくは、ITの壺「Font Awesome の使い方」を参照。
グローバルナビのメニューに Font Awesome のアイコンを付ける
WordPress の上部に表示されるグローバルメニューに、たとえば
お問い合わせ
のようにアイコンを付けたいとする。Font Awesome 4 Menus というプラグインを勧める記事もあったが、あまりプラグインは増やしたくないし、スタイルシートに少し記述を足せばその必要もない。Simplicity の場合、グローバルメニューの各項目は “menu-item-123” のような id で指定できるので、それを使って次の記述を style.css に加える。
#menu-item-123 a:before{
margin-right: 5px;
font-family: "FontAwesome";
content: "\f0e0";
}
赤字部分がアイコンフォントを指定する Unicode で、これは Font Awesome のサイトで調べられる（たとえば、このアイコン ならここに記載されている Unicode を見る）。
このやり方は、サイドバーメニューなどでも応用が利く。というか、もともとはサイドバーのカスタマイズとして書かれていた記事（「WordPressテーマ「Simplicity」をカスタマイズする19のポイント」の3.）を参考に思いついただけだが…