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

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

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

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

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

functions.php

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

または...

functions.php

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で詳細を確認できます。

Back to top

Dashiconsを使用する

CSSを読み込んでDashiconsを使用できる状態になったら、あとは下記のように表示したいところにHTMLもしくはCSSで記述・指定すれば使用できます。
例えば、WordPressのロゴを表示させたい時はそれぞれ下記のように記述し、コードでハイライト表示している部分を変更することで他のアイコンに変更することができます。

HTMLの場合 #1

HTML

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

HTMLの場合 #2

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

HTML

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

CSSの場合

CSS

element:before {
  font-family: "dashicons";
  content: "\f120";
}
Dashiconsのコード確認

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

Dashicons一覧

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

Close the search window,
please press close button or esc key.