title: Font-Awesome 5.9.0 icons not showing up in browsers; but 5.00 versions are
body: <p>I am working on a site. I have a separate directory for this mini-site inside of the bigger site. In staging (before actual production) all the newer <code>Font-Awesome</code> icons showed up, but when I pushed the site so that it was live, any icon after Font Awesome version 5.0.0 no longer showed, giving me a box or blank space instead.</p>
  
  <p>I am hosting it myself, and I have the <code>all.min.css</code> pointing to the correct /web fonts folder. Originally, I was getting an error message in the Chrome Console about not being able to find the font, which is why I had to change where it was being pointed to.</p>
  
  <p>I redownloaded the source files from <code>Font-awesome</code>, just in case something had happened there, and added them back to the site. Same issue. </p>
  
  <p>The site I am working on, in the "main site" has <code>Font-Awesome 5.0.0</code> installed, but the newer version I thought was <a href="https://i.stack.imgur.com/tgIuc.png" rel="nofollow noreferrer">Image</a> over-riding the older one. Is it possible that this might not be the case?  Even though the icon is pulling from the <code>all.min.css</code> file that is linked directly in the .php file, the page has a template file that includes the older version of Font-Awesome(5.0.0). </p>
  
  <p>Here is what I am referencing as far as the .css file:</p>
  
  <pre><code>&lt;link class="rs-file" href="/assets/vendor/font-awesome/css/all.min.css" rel="stylesheet"&gt;
  </code></pre>
  
  <p>EDITED: I tried to see if this was just a user-error, but changing the icons and the code still works. I even went in and tried the <code>pseudo-elements</code> way, and I got the boxes for these particular icons.</p>
  
  <p>Pseudo-elements code:</p>
  
  <pre><code>    display: inline-block;
      font-style: normal;
      font-variant: normal;
      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
      font-size: 60px;
      color: #0368b0;
      width: 200px;
      margin-top: 50px;
      margin-left: 10px;
      text-align: center;
    }
    .fa-icon::hover {
      color: #bdd5f6;
    }
    .wallet::before {
      font-family: "Font Awesome 5 Free";
      font-weight: 900;
      content: "\f555";
    }
  
    .money-check::before {
      font-family: "Font Awesome 5 Free";
      font-weight: 900;
      content: "\f53c";
    }
  
    .file-invoice-dollar::before {
      font-family: "Font Awesome 5 Free";
      font-weight: 900;
      content: "\f571";
    }
  
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/kugpW.png" alt="Image 2"></p>
  
  <p>Any help or insight would be appreciated. Thank you!</p>