在列表项前面添加图像

Question

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

<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');
}

Answer 1

问题

The list-style-image property determines whether the list marker is set with an image, and accepts a value of "none" or a URL that points to the image: ~css tricks

这意味着，不是将此样式应用于 li，而是将其应用于父 ul。类似于：

ul {
    list-style-image: url(images/bullet.png);
}

所以你不能仅使用这种语法将它放在单个元素上（除非你想使用 :first-child 选择器（未测试））

我的解决方案

此解决方案可能对您有用，也可能没有用，但它使用的是伪效果（意味着不需要添加真正的 'extra' 元素）。伪元素也可以点击（无需担心图像大小，因为这会为您完成）：

.rightNav2 li {
  display: inline;
  padding-right: 6px;
  padding-left: 6px;
  position: relative;
  display: block;
  /*only for demo*/
}
.rightNav2 #homeLnk a:before {
  content: "";
  height: 100%;
  width: 20px;
  left: -20px;
  top:0;
  position: absolute;
  background: url(http://placekitten.com/g/20/20);
}

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

Answer 2

尝试

.rightNav2 #homeLnk:before {
    content: url('/images/homeIcon.png');
}

您可能还想确保图片路径正确。

Answer 3

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

这是一张使用背景图片的图片。 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;
}

Answer 4

请查看我的代码笔...我相信这可能对您有所帮助： http://codepen.io/anon/pen/myRWmZ

html:

    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.css" rel="stylesheet">

<ul>
  <li>Link 1</li>
  <li class="home">Link 2</li>
  <li>Link 3</li>
</ul>

CSS:

ul {
  list-style-type: none;
}

li.home::before {
  font-family: FontAwesome;
  content: "\f015";
  margin-right: 3px;
}

li.home {
  margin-left: -18px;
}

所以我所做的是使用 :before 选择器放置一个图标。边距调整旨在确保每个列表项仍然正确对齐。

Answer 5

下面的 css 将在 home li 元素的左侧添加一个图标。

.rightNav2{
    list-style:none;
    padding:0;
    margin:0;
}
.rightNav2 li{
    padding:0;
    margin:0;
}
.rightNav2 #homeLnk {
  padding-left: 35px; 
  /* padding-left above is the width of the icon plus any whitespace between text */
  min-height:10px;
  /* min-height above is the height of the icon */
  background-image: url('/images/homeIcon.png') no-repeat center left;
}

如果这是一个响应式网站，我会在上面的回答中建议考虑图标字体。缩放时的背景图像可能会变得非常粗糙。

在列表项前面添加图像

Adding an image in front of List Item

html

css

问题

我的解决方案