html - 在列表项前面添加图像

如何在特定列表项前面添加图标？

<ul class="rightNav2">
    <li id="homeLnk"><a href="#">Home</a></li>
</ul>

我已经为列表项使用了以下样式，并且我想在其中一项之前添加特定的图标。但是图像不会出现。

.rightNav2 li {
  display: inline;
  padding-right: 6px;
  padding-left: 6px;
  color: white;
}

.rightNav2 #homeLnk {
    list-style-image: url('/images/homeIcon.png');
}

最佳答案

有几种方法可以将图像添加到列表项。

这是一个使用背景图片的图片。 http://jsfiddle.net/p05g14zm/

rightNav2 li {
  display: inline;
  padding-right: 6px;
  padding-left: 20px;
  color: white;
}

.rightNav2 #homeLnk {
    background-image: url('http://i.stack.imgur.com/vQ4nM.jpg?s=32&amp;g=1');
    background-repeat: no-repeat;
    background-size: contain;
}