WordPress LogoWordPress 3.8以降から、アイコンフォント［Dashicons］が導入され、主に管理画面で使用されています。

通常は管理画面でのみ使われていますが、種類も豊富でデザインも秀逸なので、テーマファイルに組み込んでデザインの一部として活用しましょう。

まずは Dashicons を利用可能な状態に準備する。

［Dashicons］を使うためには、前提として［dashicons.min.css］を先に読み込んでおく必要があります。
まずは以下のコードをテーマファイルの［functions.php］に記述します。

add_action( 'wp_print_styles', 'load_dashicons');
function load_dashicons() {
	wp_enqueue_style('dashicons');
}

このコードを記述した状態でサイトのソースを見ると、<head>〜</head>内に［dashicons.min.css］が読み込まれていることを確認できるはずです。

Dashicons を表示させる。

準備が整ったら、あとは投稿記事や固定ページ、またはテーマファイルの任意の場所で、html要素に対してDashicons用のクラス名を追加します。

例えば、WordPress のロゴを表示させたいときは以下のように記述します。

<div class="dashicons dashicons-wordpress"></div>

または…

<div class="dashicons-before dashicons-wordpress">ワードプレスのロゴ</div>

上記のコード内の［wordpress］の箇所を変更すると、他のアイコンが表示される仕組みになっています。

WordPress 3.9 以降からは「dashicons-before」というクラスが追加され、単にアイコンを表示するだけなら、CSS　を変更することなく :before を使用したアイコン表示ができるようになっています。

もしCSS側で［Dashicons］を表示させる設定を行いたい場合は、該当する要素に擬似セレクタ「:before」を追加して、「font-family: “dashicons”;」を 指定します。

element:before {
	font-family: "dashicons";
	content: "f230";
}

各アイコンがどのようなコードに対応しているかは、Dashiconsの公式サイトで確認することができます。

アイコンの一覧の中から使いたいアイコンを選び、「Copy CSS」または「Copy HTML」を選択すると該当するコードが出力されます。

WordPress 3.8 から 3.9 へのアップデートで、新たに30種類のアイコンが追加されたので、今後も利用できるアイコンが増えていくと思います。
比較的簡単に導入できるので、積極的に利用していきたいですね。

Developer Resources: Dashicons