title: Working with data-icon in CSS
body: <pre><code>/* Use the following CSS code if you want to use data attributes for inserting your icons */
  [data-icon]:before {
    font-family: 'Flat-UI-Icons';
    content: attr(data-icon);
    speak: none;
  </code></pre>
  
  <p>I saw this code in one of the bootstrap theme template. How does data-icon or attr(data-icon) works? i cant seem to display the "image/words" of the example i had, it's empty now. I tried</p>
  
  <p><strong><code>&lt;a href="#fakelink" class="fui-flat"&gt;text here&lt;/a&gt;</code></strong> </p>
  
  <p>The text here's font doesnt seem to be the same as the example's one and also , the example didnt have anything between the a tags.</p>
  
  <p>Please advice. Thank you</p>