ダッシュアイコンを本文に使う

CSSワードプレス絵文字

functions.phpに下記を追加

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

 

HTMLで書くなら

書き方1

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

 

書き方2

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

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

 

 

 

 

 

 

 

書き方3

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

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

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

実際の表示

ワードプレスのロゴ

 

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

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

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

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

 

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

アイコンの一覧表

Dashicons