title: How to use Font Awesome classes on arbitrary tags?
body: <p>I want, very strongly, to avoid littering my markup with non-sematic <code>&lt;i&gt;</code> tags and am attempting to use the <code>icon-*</code> CSS classes on other elements, such has headers, the primary use case.</p>
  
  <p>I have the following markup:</p>
  
  <pre><code>&lt;div class="box-header"&gt;
      &lt;h2&gt;&lt;i class="icon-list-ul"&gt;&lt;/i&gt;&lt;span class="break"&gt;&lt;/span&gt;Unordered List&lt;/h2&gt;
  &lt;/div&gt;
  
  &lt;div class="box-header"&gt;
      &lt;h2 class="icon-list-ul"&gt;Unordered List&lt;/h2&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The first is the original markup, the second is my desired markup.  Rendered, they look like:</p>
  
  <p><img src="https://i.stack.imgur.com/LfAbk.png" alt="Initial result."></p>
  
  <p>I'll worry about the divider later.  Note, however, the difference in 'boldness' of the text.  I notice that Font Awesome by default applies its font (and some other properties) to anything with a CSS class matching <code>icon-*</code>, and my first attempt to correct the problem revolved around changing this css:</p>
  
  <pre><code>[class^="icon-"],
  [class*=" icon-"] {
      font-family: FontAwesome;
      font-weight: normal;
      font-style: normal;
      text-decoration: inherit;
      -webkit-font-smoothing: antialiased;
      *margin-right: .3em;
  }
  </code></pre>
  
  <p>Into the following to ensure the the font selection is only applied to the <code>:before</code> icon content:</p>
  
  <pre><code>[class^="icon-"]:before,
  [class*=" icon-"]:before {
      font-family: FontAwesome;
      font-weight: normal;
      font-style: normal;
      text-decoration: inherit;
      -webkit-font-smoothing: antialiased;
      *margin-right: .3em;
  }
  </code></pre>
  
  <p>Now I have a different problem, as can be shown in the following screenshot:</p>
  
  <p><img src="https://i.stack.imgur.com/akfZP.png" alt="Result using modified CSS."></p>
  
  <p>While the font weight is back to the normal (thin) value, the alignment of the text has shifted down substantially, both for the standard markup and my desired markup cases.  What's going on here, and how can I use the <code>icon-*</code> classes on arbitrary elements without those elements own formatting getting out-of-wack?</p>
  
  <p>Thanks for any assistance you can offer!</p>