Question

如何为每个列表元素添加图标？

        <nav class="mobile">
            <ul>
                <li><img class="icon" src="images/ico/home.png" style="width:10px; height:10px; margin: 2px; float:left;"/><a href="index.php">Home</a></li>
                <li><a href="index.php">Articles</a></li>
                <li><a href="photos.php">Photos</a></li>
                <li><a href="index.php">Services</a></li>
                <li><a href="index.php">Contacts</a></li>
            </ul>
        </nav>

到目前为止我已经尝试过了，但我的图标与<a>元素不符。

Answer 1

您可以使用各种工具，例如来自字体的字体图标，甚至您拥有自定义字体。只需使用伪类：在li之前，然后向其中添加内容。

li:before {
  content: '+';
}

＆＃13;

li:before {
  content: '+';
}

＆＃13;

<nav class="mobile">
  <ul>
    <li><a href="index.php">Home</a></li>
    <li><a href="index.php">Articles</a></li>
    <li><a href="photos.php">Photos</a></li>
    <li><a href="index.php">Services</a></li>
    <li><a href="index.php">Contacts</a></li>
  </ul>
</nav>

＆＃13;

Answer 2

这很简单，只需在标题中使用css：

<style type="text/css">
    li:id1 {
        list-style-image: url('anyimg1.gif');
    }

    li:id2{
        list-style-image: url('anyimg2.gif');
    }
</style>

和HTML：

<ul>
      <li id="id1"><a href="index.php">Home</a></li>
      <li id="id2"><a href="index.php">Articles</a></li>
</ul>

如何将图标添加到列表元素

2 个答案: