Question

我正在使用模板网站，但需要在导航菜单中为每个页面添加不同的图标。如何在不使用图标网络字体的情况下执行此操作？

  <ul class="chevron">
            <li><a href="index.html"><i class="icon-list"></i>Home</a></li>
            <li><a href="gallery.html"><i class="icon-camera"></i>About Me</a></li>
            <li><a href="about.html"><i class="icon-heart"></i>What is Occupational Therapy?</a>
<li><a href="about.html"><i class="icon-heart"></i>Why it works</a>
            </li>
            <li><a href="about.html"><i class="icon-heart"></i>Pricing</a></li>
            <li><a href="about.html"><i class="icon-heart"></i>Q&A</a></li>
            <li><a href="about.html"><i class="icon-heart"></i>Links</a></li>
            <li><a href="contact.html"><i class="icon-mail"></i>Contact</a></li>
          </ul>

Answer 1

您只需使用图片即可。

<ul class="chevron">
    <li><a href="#">Link 1 <img src="..." alt="..."></a></li>
    <li><a href="#">Link 2 <img src="..." alt="..."></a></li>
    <li><a href="#">Link 3 <img src="..." alt="..."></a></li>
</ul>

然后，在CSS中，如果图像尚未缩放，您可以定位图像以使其具有更合适的宽度/高度。

ul.chevron li img{
    width: 50px;
}

Answer 2

（从我的评论中复制。即使OP没有SVG文件，也许这对其他用户有用）

你有图标字体的SVG文件吗？您可以将字体的SVG版本导入http://icomoon.io/app并补充其免费字体集。我相信你可以使用其中一个。我只提到icomoon，因为它是我用过的唯一一个，但http://fontello.com也可以用。{/ p>

您可以导入SVG，选择所有图标，从其他图标集中选择任何其他图标，然后导出组合集。您可能需要更改名称或调整样式表，但这应该会为您提供一个工作集，然后您可以使用它。

如何在导航菜单中添加自定义图像图标？

2 个答案: