ul要素とli要素を使って作る「リスト」(箇条書き)には、標準では各項目の先頭に黒丸や白丸などの記号が付きます。この記号は任意の画像に置き換えることもできます。リストの先頭記号を指定するにはlist-style-typeプロパティを使いましたが、リストの先頭記号として画像を指定するには、list-style-imageプロパティを使います。値に画像ファイルのURLを指定するだけで、リストの先頭を画像にできます。

例えば、「FingerAllowR.gif」というファイル名で「」という画像を用意し、これをリストの先頭記号の代わりに表示させたい場合は、次のようにCSSソースを記述します。

ul {
   list-style-image: url("FingerAllowR.gif");
}

上記のスタイルを適用すると、ul要素に含まれる各項目(li要素)の先頭記号が、指(矢印)画像に置き換わります。もし指定した画像ファイルが読み込めなかった場合はデフォルトの記号で表示されます。
実際に表示させると、以下のように見えます。

ただ、古いバージョンのブラウザによっては、画像が必ずしも(上下方向の)中央に配置されるとは限らないようで、これがちょっと困った点でした。その点を解決すべく、list-style-imageプロパティではなく、background-imageなどを使って、「左端に配置した背景画像」を使ってリストの先頭記号のように見せる方法もよく使われてきた気がします。もっとも、今となってはブラウザ間の表示の差は小さくなったので、何も気にせずにlist-style-imageプロパティを使えば良いと思いますが。

(更新日：2016年01月26日)