title: Icon replaced with CSS content() and ::before not shown in Firefox
body: <p>I want to replace a text in a menu item with an icon via CSS. The Icon should then be clickable. I tried it with the following code and it looks good in Safari and Chrome. However Firefox displays "Home" instead of the image.</p>
  
  <p>Does anybody know what the solution for Firefox is?</p>
  
  <p><a href="http://codepen.io/anon/pen/vEQZLb" rel="nofollow">http://codepen.io/anon/pen/vEQZLb</a></p>
  
  <pre><code>&lt;ul id="menu-home" class="menu genesis-nav-menu menu-primary"&gt;
    &lt;li id="menu-item-1951" class="home menu-item "&gt;
      &lt;a href="home"&gt;Home&lt;/a&gt;
    &lt;/li&gt;
    &lt;li id="menu-item-17414" class="menu-item"&gt;
    &lt;a href="link1"&gt;Link 1&lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  
  .nav-primary ul.menu &gt; li a::before {
      visibility: visible;
  }
  
  .nav-primary ul.menu &gt; li.home a::before {
    content: url('images/home_icon.jpg') no-repeat;
    position: relative;
    bottom:-2px;
  }
  </code></pre>
  
  <p>Thanks!</p>