さぁ!検索しよう!

WordPressのウィジェットで追加したカテゴリー等の項目先頭に、CSSのみでアイコンを表示させる方法を解説します。

li要素に背景画像を指定し表示させる方法もありますが、画像の用意に時間がかかることや、ページ速度の低下、更には後で色を変更することになった場合にその都度作り直さなければならない等といった問題点があるため、賢い選択とは言えません。

Font Awesomeは通常、HTMLに<i class="fa fa-bed"></i>のように定義することで表示させますが、今回はCSSのみでということなのでUnicodeで表示させます。

UnicodeはFont Awesomeの全てのアイコンに割り振られており、下記の部分がUnicodeとなります。

uni

上記のUnicodeに加えてfont-family:"FontAwesome";を下記のようにして追加します。

.wp-tag-cloud a:before {
	content:"f07c";
	font-family:"FontAwesome";
	margin-right:0.5rem;
}

すると下記のように、項目の横にアイコンが表示されます。

cate

以上です。