title: icon font not working in firefox
body: <p>I'm trying to use icon font, so far it works good in all browsers besides firefox, I don't understand why, instead of icon it just shows value that is in <code>data-icon</code> attribute
  Can anyone explain why it is not working in firefox (latest)?</p>
  
  <pre><code>@font-face {
    font-family: 'icon-font';
    src: url('//bit.ly/ZxomPz') format('woff'),
         url('//bit.ly/WPGMJF') format('truetype'),
         url('//bit.ly/16eqBwn') format('eot'),
         url('//bit.ly/16eqLDZ') format('svg');
  }
  
  [data-icon]::before {
  font-family: 'icon-font';
  font-weight: 400 !important;
  content: attr(data-icon);
  text-transform: none;
  margin-right: 3px;
  position: relative;
  top: 8px;
  right: 5px;
  font-size: 31px;
  line-height: 0;
  }
  </code></pre>
  
  <p><br></p>
  
  <pre><code>&lt;span data-icon="1" aria-hidden="true"&gt;&lt;/span&gt;
  </code></pre>