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

我创建了一个JSFIDLE：

HTML:

按名称
按专业
按地点

我想做的是在每个选项卡的文本左侧添加一个图像，如下所示：

我如何才能完成添加图标到每个选项卡，如上图所示

更新：

---

只需使用

img

标签，如下所示：

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

按名称

---

您可以使用

：before

伪元素将图标放置在每个列表项中

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

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

中添加类。例如，我添加了class

.place

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

名字
按专业
按地点

使用Css

列表样式图像

属性

HTML

更新：

您可以使用

background position

属性更改li的背景和背景位置，而不是使用上面的方法（可能需要更多的修改）：

HTML

示例：

---

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

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

我加入了填充，这样文本从图标后面开始，不会出现在图标上方/覆盖它

• “10px”-您希望它离左边缘多远
• “中心”-在< <
中间有图标/图像
• 由于它是一个背景，您还需要通过“禁止重复”来防止它重复

---

---

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

如果我这样使用图像，则图像未正确垂直对齐。请向其添加css。我已经更新了你的小提琴并作为评论发布了。@SearchForkKnowledge那是另一个问题。。。有关如何对齐图像，请参见此处：@ajc此解决方案有效。但我想我可能会选择Kheema的，因为他使用CSS方法。谢谢。鼠标悬停的颜色不会随版本而改变。我已经试过了：/你问的问题没有提到这一点。@SearchForkKnowledge在Chrome上用鼠标切换颜色似乎对我很好/Win7@SearchForKnowledge你提供的小提琴也不会变。这是你想补充的吗？如果是这样的话，你需要发布另一个关于这个问题的问题。这里真的需要表格吗？我正在努力避免使用表格。。。感谢您的响应

tables

应仅用于当前规范中的“表格数据”。@SearchForKnowledge此解决方案对您有帮助吗？映像正在从服务器调用。这可能是映像稍晚出现的原因，但是如果你使用你的本地图像或图标，它将运行完美。如果我想要三个单独的图标用于三个不同的选项卡，该怎么办？我正在更新我的代码以匹配你的，并将更新你。谢谢：）如何垂直对齐图标和文本中心？我更新了我的问题，用它是如何显示的图像。这听起来是一个很好的解决方案。我会测试一下。谢谢@dnnsother——为了保持你的颜色，你已经在这里定义了，比如在“不重复”之前加上（#3C75C3）。实际上这是我的错误，因为我的颜色也没有改变。很抱歉我对你的答案投了赞成票：）看起来很干净简单。我试试看。我暂时对你的答案投了赞成票。谢谢！此外，如果图像没有显示，您可能希望在css中使用，

float:left/right

，而不是

display:inline

。如果您需要，我可以在JSfiddle中生成代码这里是JSfiddle的一个示例：。。我对这三张照片都使用了相同的图片。。但是代码都在那里。我想你的代码是有效的。我将把它添加到我的代码和测试。。。谢谢。事实上，没关系，我不得不把填充物做得更多，现在它工作得很好。谢谢：）接受了你的回答。

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

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

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

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

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

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

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