リスト(<li>)のマーカーにWebフォントを使う

画像を使わずリストマーカーを変更するサンプルです。

See the Pen list marker FontAwesome by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

HTML

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<ul>
  <li>test1</li>
  <li>test2</li>
  <li>test3</li>
</ul>

一行目でCDNのFontAwesomeを読んでいるのみで普通のリストです。

Sass

ul li {
  list-style: none;
  position: relative;
  &:before {
    position: absolute;
    left: -1.5em;
    font-family:'FontAwesome';
    content: "\f005";
    color: #dd0;
  }
}

キモとしては「:before」の擬似要素をマーカーとしている点です。

contentにはマーカーにしたいアイコンのコードをFontAwesomeから解析して入れましょう。アイコン一覧をデベロッパーツールなどで見れば分かります。