title: Font awesome using font face
body: <p>I'm looking for something like this</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@font-face {
    font-family: "FontAwesome";
    font-weight: normal;
    font-style : normal;
           src : url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?v=4.3.0");
           src : url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?#iefix&amp;v=4.3.0") format("embedded-opentype"),
                 url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0") format("woff2"),
                 url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff?v=4.3.0") format("woff"),
                 url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.ttf?v=4.3.0") format("truetype"),
                 url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular") format("svg");
  }
  
  .myClass:before {
      font-family: FontAwesome;
      content: "\f024";
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a class="myClass" href="#"&gt;This is a link&lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want to load font file using CSS property. And to create a custom class for font icon. The above didn't work. It failed to load respective icon. Instead it show bar </p>