Help us understand the problem. What is going on with this article?

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

More than 5 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の値を書きます。

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

ryounagaoka
福岡に引きこもっている永遠の中2
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away