title: What are the advantages of using <i> before an element instead of wrapping the element in <span>?
body: <blockquote>
    <p><strong>Possible Duplicate:</strong><br>
    <a href="https://stackoverflow.com/questions/11135261/i-tag-for-icons">&lt;I&gt; tag for icons?</a>  </p>
  </blockquote>
  
  
  
  <p>I've seen in <a href="http://fortawesome.github.com/Font-Awesome/" rel="nofollow noreferrer">FontAwesome</a> that to use their icon fonts, they are employing an empty <code>&lt;i&gt;</code>, something like this:</p>
  
  <pre><code>&lt;a class="btn" href="#"&gt;
     &lt;i class="icon-refresh"&gt;&lt;/i&gt; Refresh
  &lt;/a&gt;
  </code></pre>
  
  <p>instead of wrapping it with <code>&lt;span&gt;</code> like this:</p>
  
  <pre><code>&lt;a class="btn" href="#"&gt;
     &lt;span class="icon-refresh"&gt;Refresh&lt;/span&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>I've seen some other websites employ similar technique too. AFAIK, both technique utilizes the CSS pseudo-element <code>:before</code>, so I wonder why do they use <code>&lt;i&gt;</code> instead of wrapping it with <code>&lt;span&gt;</code>?</p>
  
  <p>Are there any advantages on using an empty <code>&lt;i&gt;</code>? And is it semantic?</p>