HTML5
CSS3
FontAwesome

FontAwesomeのiconをulやolのlist-styleに使う方法

More than 3 years have passed since last update.

FontAwesomeのiconをulやolのlist-styleに使いたくなることってありますよねー。

残念ながら、list-styleに直接アイコンを使うことは出来ないのですが、以下の方法を使えば、同じようなことが実現できます。

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

(中略)
<ul>
<li>人間失格</li>
<li>斜陽</li>
<li>ヴィヨンの妻</li>
</ul>

CSS

ul {

list-style: none;
}
li:before {
font-family: FontAwesome;
content: '\f054'; /* アイコンのunicode */
}

li:beforeに設定するcontentにはバックスラッシュに続けて、FontAwesomeサイトのアイコン詳細ページ(上の例だとここ)に描かれてるUnicodeの値を書きます。

デモで実際にどうなるか御覧ください。