WordPress：Dashiconsをテーマで使用する方法

WordPress Ver 3.8から導入されたアイコンフォント「Dashicons」を管理画面ではなくテーマで使用する方法を調べたので備忘録です。
また、Ver 3.9から「dashicons-before」というクラスが追加されたの知らなかったので、それに関しても書いておこうと思います。

Dashiconsを使用できる状態にする

参考で見たやつそのままですが、まずDashiconsを使用できる状態にするためにCSSを読み込む必要があるので、以下のどちらかをfunctions.phpに記述します。

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

または...

add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
function theme_name_scripts() {
  wp_enqueue_style( 'style-name', get_stylesheet_uri(), array('dashicons'), '1.0' );
}

上記どちらかを記述することでdashicons.min.cssが読み込まれていることを確認できると思います。
どちらの方法を用いるかはテーマや自身が使いやすい方に合わせてください。

この方法はそのまま以下で紹介されている方法です。

また、上記それぞれで使用しているwp_enqueue_style()について詳しく知りたい場合はCodexで詳細を確認できます。

Dashiconsを使用する

CSSを読み込んでDashiconsを使用できる状態になったら、あとは下記のように表示したいところにHTMLもしくはCSSで記述・指定すれば使用できます。
基本的な使い方としては表示したい要素に.dashiconsまたは.dashicons-beforeのclassを記述しつつ、.dashicons-{iconname}も記述していきます。
例えば、WordPressのロゴを表示させたい場合はアイコン名がwordpressとなるのでそれぞれ下記のように記述します。

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

<p class="dashicons-before dashicons-wordpress">WordPress</p>

Ver 3.8のDashicons導入時にはなかったんですが、Ver 3.9になり.dashicons-beforeというクラスが追加され、表示するだけならこのクラスを使うことでCSSを変更することなく::beforeを使用したアイコン表示ができるようになったみたいです。

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

アイコン名の調べ方・アイコン一覧

どのアイコンがどのクラスやコードを記述することで使用できるかは「Dashicons」で確認することができ、一覧化されているアイコンの中から使用したいアイコンを選ぶとイメージのようにページ上部に選択したアイコンが大きく表示されます。
あとは、CSSで使用したい場合は「Copy CSS」を、HTMLで使用したい時は「Copy HTML」をそれぞれ選択すると該当のコードが出力されるので、それを用いることで選択したアイコンを使用することができます。

Ver 3.9でも新たに30種類のアイコンが追加されました（WordPress › Dashicons in WordPress 3.9 « Make WordPress Core）し今後も増えていくと思いますが、現状だとこのイメージにあるようなアイコンが使用できます。