如何将自定义图像图标添加到导航菜单？

Question

I am using a template website, but need to add a different icon to each of the pages in the navigation menu. How can I do this without using a icon web font?

  <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

You can simply use an image.

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

Then, in your CSS, you can target the image to give it a more appropriate width/height if it's not already scaled.

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

Answer 2

(Copied from my comment. Even if OP doesn't have the SVG file, maybe this will prove useful to other users)

Do you have an SVG file for the icon font? You could import an SVG version of the font into http://icomoon.io/app and supplement with their free font sets. I'm sure there's one in there you could use. I only mention icomoon because it's the only one I've ever used but http://fontello.com could work too.

You would import the SVG, select all of the icons, select any additional icons from the other icon sets, and then export the combined set. You may have to change the names or adjust your stylesheet, but this should get you a working set that you can then use instead.