functions.phpに下記を追加

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

 

HTMLで書くなら

書き方１

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

実際の表示

 

書き方２

下記でも表示できるけれど、余計なCSSが付いちゃう。

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

実際の表示

 

 

 

 

 

 

 

書き方３

これを避けるように書くと、

<p><span class="dashicons dashicons-wordpress">&#x200B;</span>ワードプレスのロゴ</p>

タグと閉じタグのあいだがnullだどタグ自体消されちゃう（ことが多い）ので、下記のようになんらかの空白記号を入れる必要がある。

実際の表示

​ワードプレスのロゴ

 

で、面倒なので「書き方１」。

CSSなら、何ら特別なことは無し

span:before	{
	font-family: "dashicons";
	content: "\f324";
}

適用する要素はdivでもpでも何でもいい。

 

JIS記号よりはるかに表現力があるし、元から入っているものなので割と気軽に使える。

アイコンの一覧表

Dashicons