如何将图标添加到UL列表选项卡

Question

我创建了一个JSFIDDLE：http://jsfiddle.net/Qw2Q7

HTML：

<ul id="tabs">
    <li class="active">By Name</li>
    <li>By Specialty</li>
    <li>By Location</li>
</ul>

我要做的是在每个标签的文本左侧添加一个图像，如下所示：

如何完成如上图所示的每个标签添加图标？

更新：

Answer 1

只需使用img标记即可：

<li class="active"><img src="whatever.png" />By Name</li>

Answer 2

使用Css list-style-image属性。

HTML

<ul id="tabs">
    <li class="active person">By Name</li>
    <li class="book">By Specialty</li>
    <li class="target">By Location</li>
</ul>

然后CSS

ul#tabs li.person {
list-style-image: url('images/person.png');
}

ul#tabs li.book {
list-style-image: url('images/book.png');
}

ul#tabs li.target {
list-style-image: url('images/target.png');
}

<强>更新

而不是上面的方式，可能需要更多一点改变你可以只改变li的背景和使用background-position属性：

HTML

<ul id="tabs">
    <li class="active person">By Name</li>
    <li class="book">By Specialty</li>
    <li class="target">By Location</li>
</ul>

然后CSS

ul#tabs li.person {
background: #3C75C3 url('images/person.png') no-repeat;
background-position: 7px center;
}

ul#tabs li.book {
background: #3C75C3 url('images/person.png') no-repeat;
background-position: 7px center;
}

ul#tabs li.target {
background: #3C75C3 url('images/person.png') no-repeat;
background-position: 7px center;
}

示例： http://jsfiddle.net/Qw2Q7/57/

Answer 3

您可以使用:before伪元素将图标放在每个列表项中。

例如，检查下面的CSS和 Demo 。现在更新 Demo

li:before
    {
    content: "";
    position:absolute;
    content:url('http://lorempixel.com/20/20');
    left:0;
    height:20px;
    width:20px;
    }
li:before :hover
    {
    content: "";
    position:absolute;
    content:url('http://lorempixel.com/20/20');
    left:0;
    height:20px;
    width:20px;
    }

如果您需要单独的图标，则必须在每个li中添加该类。例如，我添加了课程.place。

li.place:before
    {
    content: "";
    position:absolute;
    content:url('http://placehold.it/20/20');
    left:0;
    height:20px;
    width:20px;
    }

Answer 4

您可以为每个 li 定义 id ，例如：

<li id="icon-name" class="active">By Name</li>

然后在css中定义背景（图标），例如：

#icon-name {
background: url('_IMAGE_PATH_') 10px center no-repeat;
padding-left: 20px;
}

我添加了填充，因此文本在图标后面开始，并且不会出现在它上面/覆盖它。

• “10px” - 你想从左边缘走多远
• “center” - 将图标/图片放在 li
的中间
• 由于它是背景，你还需要通过“不重复”
来防止它重复

_IMAGE_PATH_应该更改为图像的实际路径。

Answer 5

<ul id="tabs">
    <li class="active">
    <table cellspacing=1 cellpadding=1 style=''>
    <tr><td><img src='source'></td><td>By Name</td></tr></table></li>
    <li>By Specialty</li>
    <li>By Location</li>
</ul>