title: Custom font not applied in :before pseudoelement in CSS
body: <p>I have problem with CSS content value. It’s not displayed at all, just codes, like in the picture. Can anyone explain what causes it? I’ll try to fix it, without posting code here.</p>
  
  <p><img src="https://i.stack.imgur.com/rajl8.png" alt="Screenshot showing U+F041 placeholder as list item bullet"></p>
  
  <p>HTML:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;a href="#"&gt;&lt;i class="icon-map-marker"&gt;&lt;/i&gt; Atlanta&lt;/a&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>.icon-map-marker:before{
      content: "\f041"
  }
  
  @font-face {
      font-family: 'FontAwesome';
      src: url('fontawesome-webfont.eot');
      src: url('fontawesome-webfont.eot') format('embedded-opentype'),
           url('fontawesome-webfont.woff?') format('woff'),
           url('fontawesome-webfont.ttf') format('truetype');
      font-weight: normal;
      font-style: normal
  }
  
  [class^="icon-"], [class*=" icon-"] {
      font-family: FontAwesome;
      font-weight: normal;
      font-style: normal;
      text-decoration: inherit;
      -webkit-font-smoothing: antialiased;
      display: inline;
      width: auto;
      height: auto;
      line-height: normal;
      vertical-align: baseline;
      background-image: none;
      background-position: 0 0;
      background-repeat: repeat;
      margin-top: 0
  }
  </code></pre>