画像を使わずリストマーカーを変更するサンプルです。
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から解析して入れましょう。アイコン一覧をデベロッパーツールなどで見れば分かります。