title: How do I add a custom image icon to my navigation menu?
body: <p>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?</p>
  
  <pre><code>  &lt;ul class="chevron"&gt;
              &lt;li&gt;&lt;a href="index.html"&gt;&lt;i class="icon-list"&gt;&lt;/i&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="gallery.html"&gt;&lt;i class="icon-camera"&gt;&lt;/i&gt;About Me&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="about.html"&gt;&lt;i class="icon-heart"&gt;&lt;/i&gt;What is Occupational Therapy?&lt;/a&gt;
  &lt;li&gt;&lt;a href="about.html"&gt;&lt;i class="icon-heart"&gt;&lt;/i&gt;Why it works&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="about.html"&gt;&lt;i class="icon-heart"&gt;&lt;/i&gt;Pricing&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="about.html"&gt;&lt;i class="icon-heart"&gt;&lt;/i&gt;Q&amp;A&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="about.html"&gt;&lt;i class="icon-heart"&gt;&lt;/i&gt;Links&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="contact.html"&gt;&lt;i class="icon-mail"&gt;&lt;/i&gt;Contact&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
  </code></pre>