title: Fontawesome can't load icon by reference number in css
body: <p>This is similar to the 'icon appears as a square' question, however mine works when using 'fa fa-child' etc, but not when I use the image reference id.</p>
  
  <p>In my layout I have:</p>
  
  <pre><code> &lt;link href="~/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css"&gt;
  &lt;link href="/css/my-css.min.css" rel="stylesheet" id="theme"&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.my-button {
      background: linear-gradient(45deg,#585858,#8C8C8C)
  }
  
  .my-button-blue:before {
      content: "\f500";
      font-family: FontAwesome;
      position: absolute;
      color: white;
      top: 50%;
      left: 50%;
  }
  </code></pre>
  
  <p>Only using "\f500" in my css breaks it (it just shows a square), however using it in the code as below works fine: </p>
  
  <pre><code>&lt;i class="fas fa-smile fa-2x text-white"&gt;&lt;/i&gt;
  </code></pre>
  
  <p>I have also tried @import"../vendor/fontawesome-free/css/all.min.css"; in my-css</p>
  
  <p>I am tying to use it as part of my background image so that it 'crops' when reaching the  edge - sort of like a watermark.</p>
  
  <p>Fiddle:</p>
  
  <p><a href="https://jsfiddle.net/as8L924e/2/" rel="nofollow noreferrer">https://jsfiddle.net/as8L924e/2/</a></p>
  
  <p>Although this shows no icons...</p>