title: Fallback from FontAwesome if font download blocked
body: <p>I'm developing a web page and found <a href="http://fortawesome.github.io/Font-Awesome/" rel="noreferrer">FontAwesome</a> as a pretty neat way to add nice icons to things, however by default font downloads are blocked by the <a href="http://noscript.net/" rel="noreferrer">NoScript plugin</a> for Firefox.</p>
  
  <p>This would not be an issue for normal fonts, but FontAwesome uses unicode characters which are deliberately outside the usual printable range of most fonts, so adding a font stack to the CSS (EG: <code>font-family: FontAwesome, sans-serif;</code>) will not work as all the icons just render as hex-squares.</p>
  
  <p>I realise I can tweak NoScript to allow font downloads, but that is not the ideal solution for all users - I would rather the page degrade gracefully.</p>
  
  <p>Of course, it would be easy to do this with Javascript/jQuery, but of course if it's <strong>NoScript</strong> that's doing the blocking that's no help either, and it fails the test if the user doesn't have javascript enabled.</p>
  
  <p>What would be ideal would be to have some CSS style/rule that acts as the fallback for any FontAwesome objects, replacing them with some basic character or even just not displaying anything.</p>
  
  <p>For those unfamiliar with FontAwesome / TL;DR:</p>
  
  <p>All FontAwesome icons have the CSS class "fa":</p>
  
  <pre><code>.fa {
      display: inline-block;
      font-family: FontAwesome;
      font-style: normal;
      font-weight: normal;
      line-height: 1;
  }
  </code></pre>
  
  <p>FontAwesome loads the custom font like this (I removed</p>
  
  <pre><code>@font-face {
      font-family: "FontAwesome";
      font-style: normal;
      font-weight: normal;
      src: url("../fonts/fontawesome-webfont.eot?#iefix&amp;v=4.0.3") format("embedded-opentype"), url("../fonts/fontawesome-webfont.woff?v=4.0.3") format("woff"), url("../fonts/fontawesome-webfont.ttf?v=4.0.3") format("truetype"), url("../fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular") format("svg");
  }
  </code></pre>
  
  <p>And then a particular FontAwesome icon will have its own specific class that inserts the relevant unicode character, for example:</p>
  
  <pre><code>.fa-star:before {
      content: "";
  }
  </code></pre>
  
  <p>The HTML for the icon will look like this:</p>
  
  <pre><code>&lt;i class="fa fa-star"&gt;&lt;/i&gt;
  </code></pre>
  
  <p><strong>So the problem here is:</strong>
  We need some way, preferably in CSS, to replace, remove, or hide the content of items with the CSS class "fa" if the typeface "FontAwesome" is NOT loaded.</p>