title: Adding image/icon before site's title/logo in nav-bar with Zurb's foundation 4
body: <p>I'm using Foundation for a project and I'm trying to add a small icon right before "SITENAME" in the top left corner.
  I've tried this css:</p>
  
  <pre><code>.top-bar .name h1 a:before {
      background-image: url('images/logo.png');
      background-size:18px 18px;
      background-repeat: no-repeat;
  
  }
  </code></pre>
  
  <p>but it doesn't seem to work. the image path is correct.</p>
  
  <p>Here's the html:</p>
  
  <pre><code>&lt;nav class="top-bar" id="mainmenu"&gt;
      &lt;ul class="title-area"&gt;
          &lt;li class="name"&gt;
              &lt;h1&gt;&lt;a href="/site"&gt;SITENAME&lt;/a&gt;&lt;/h1&gt;
          &lt;/li&gt;
          &lt;li class="toggle-topbar menu-icon"&gt;&lt;a href="#"&gt;&lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;section class="top-bar-section"&gt;
      &lt;/section&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>How can I add a simple icon/image without hacking into foundation.css?</p>