title: data-icon with list
body: <p>I have a little problem with my css when I'm using the data-icon attribute.</p>
  
  <p>I used the :before property to do that and my icon is displayed on top of it and not on the left like I wanted.</p>
  
  <p><img src="https://i.stack.imgur.com/sl6He.png" alt="enter image description here"></p>
  
  <p>CSS :</p>
  
  <pre><code>[data-icon]:before {
      font-family: 'icons';
      content: attr(data-icon);
      speak: none;
      font-weight: normal;
      -webkit-font-smoothing: antialiased;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ul class="tags" data-icon="&amp;#x54;"&gt;
      &lt;li&gt;Petrole&lt;/li&gt;
      &lt;li&gt;Gazoil&lt;/li&gt;
      &lt;li&gt;BP&lt;/li&gt;
      &lt;li&gt;Car&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Hope you can figured it out.</p>