问题

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

问题

list-style-image属性确定列表标记是否为设置图像，并接受＆＃34;无＆＃34;的值或指向的URL 到图像：〜css tricks

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

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

因此，您只能使用此语法将其放在单个元素上（除非您想使用:first-child选择器（未经过测试））

我的解决方案

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

请查看我的codepen ...我相信这可能会对您有所帮助： 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;
}

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

在列表项前面添加图像

5 个答案:

问题

我的解决方案