title: Why does font-awesome recommend using <i> elements instead of <span> elements? Is one preferable for a concrete reason?
body: <p>If you review the <a href="http://dev.w3.org/html5/html-author/#the-i-element" rel="noreferrer">examples for font-awesome</a>, you will see that they consistently use the <code>i</code> element.  I would have thought that the <a href="http://dev.w3.org/html5/html-author/#the-span-element" rel="noreferrer"><code>span</code> element</a> would be a more appropriate choice, since the <code>i</code> element was <a href="http://dev.w3.org/html5/html-author/#the-i-element" rel="noreferrer">intended to modify a "span of text."</a>, but what I want to do is place a glyph on the page, not modify existing text.</p>
  
  <p>You could make the case that the span element was also intended to modify a span of text (hence the name), but the W3C definition leaves it wide open--simply stating that <code>span</code> "<a href="http://dev.w3.org/html5/html-author/#the-span-element" rel="noreferrer">can be useful when used together with other attributes.</a>"</p>
  
  <p>However, my question is not focused on the semantics of the two tags, but on the user experience implications of one tag over the other.  In my testing, the <code>span</code> works just as well as <code>i</code>.  Are there any concrete reasons why one is preferable over the other?  Examples of concrete reasons include:</p>
  
  <ol>
  <li>One element being handled reasonably by accessibility software (e.g., screen readers), and the other not.</li>
  <li>User agent support (e.g., one element behaves consistently across user agents, the other doesn't).</li>
  </ol>