管理画面で使用されているアイコン(Dashicons)をテーマ内で使用する

WordPressの管理画面では、メニュー等のアイコンとして「Dashicons」というWordPress公式のアイコンフォントが使用されています。このDashiconsをテーマの中でも使用したい、という場合は、下記のように設定を行います。

1. functions.phpに設定を追加する

まず、functions.phpで下記のようにDashiconsを読み込む設定を記載します。

add_action( 'wp_enqueue_scripts', 'load_dashicons' );

function load_dashicons() {
	wp_enqueue_style( 'dashicons' );
}

add_action( 'wp_enqueue_scripts', 'load_dashicons' );

function load_dashicons() {

wp_enqueue_style( 'dashicons' );

}

ベースになるCSSを <link> ではなく「テーマにCSS、JavaScriptを追加する (functions.php)」のような形でfunctions.php経由で読み込んでいる場合は、上記の代わりにwp_enqueue_style() の3つ目の引数を array('dash icons') とするだけで大丈夫です。

add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

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

add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

function theme_name_scripts() {

wp_enqueue_style( 'style-name', get_stylesheet_uri(), array('dashicons'), '1.0' );

}

※ wp_enqueue_style() の3つ目の引数は、設定しようとしているスタイルが読み込まれるより前に読み込むべき他のスタイルをWordPressに教えるものです。
※ ユーザーがWordPressにログインしている場合はDashiconsは自動的に読み込まれていますが、ログインしていない場合は読み込まれないため、この設定をしていない場合はログインしていないとアイコンが表示できなくなってしまいます。

2. アイコンを設置する

アイコンを設置する方法はいくつかあります。次のいずれかで行ってください。

HTMLにアイコン用のタグを設置する

下記のようなアイコン用のタグを設置すると、好きなところにアイコンを表示させることができます。

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

1	<span class="dashicons dashicons-wordpress"></span>

dashicons dashicons-wordpress の wordpress の箇所を好きなアイコンの名前(後述)に変更することでいろいろなアイコンを使用することができます。

HTMLの既存のタグ(要素)にアイコン用のクラスを追加する

「空のタグを設置するのはちょっと嫌かも…」という場合は、既存のタグ(要素)にアイコン用のクラスを設定することでもアイコンを表示させることができます。

<h2 class="dashicons-before dashicons-wordpress">見出し</h2>

1	<h2 class="dashicons-before dashicons-wordpress">見出し</h2>

(class="dashicons-before dashicons-アイコン名" の部分を追加するだけです)

CSSで既存のクラスなどにアイコンを設定する

「たくさんのタグ(要素)にアイコンをつけたいのでHTML側に設定するのは大変…」という場合は、CSS側でアイコンの設定を行うこともできます。

(例: すべての h2 の手前(::before)にWordPressのアイコン(\f120)を追加)

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

h2::before {

font-family: dashicons;

content: "\f120";

}

※「\f120」の部分はアイコンごとのコード番号です。(後述)
※ 位置や色、サイズなどを調整したい場合は、paddingやcolor、font-sizeなどで独自に調整できます。(Dashiconsはアイコンフォント(絵文字のようなもの)なので、文字関係のCSSで調整が効きます)

使用できるアイコンの種類と名前、コード番号

Dashiconsで使用できるすべてのアイコンの種類、名前、CSSでのコード番号は「Dashicons | WordPress Developer Resources」から確認・取得できます。

使用したいアイコンをクリックするとページの上部に大きく表示されます。右側にクラスに使うアイコン名が表示され、「Copy CSS」でコード番号、「Copy HTML」でアイコン用のタグが取得できます。