在列表项前添加图像 [英] Adding an image in front of List Item

问题描述

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

How can I add an icon in front of a specific list item?

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

我已经为列表项设置了以下样式，我想在其中一项前添加特定图标.但是图像没有出现.

I have the following style for the list items already and I want to add a specific icon in front of one of the items. The image however does not appear.

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

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

推荐答案

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

There are several methods to add an image to a list item.

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

Here is one using a background image. 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&g=1');
    background-repeat: no-repeat;
    background-size: contain;
}

这篇关于在列表项前添加图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！