title: Angular 6 font awesome icons shown as random characters
body: <p>I have initiated a new project using the angular cli and installed font-awesome 4.7.0</p>
  
  <p>then I add it as a dependncy in my angular.json</p>
  
  <pre><code>"styles": [
            "./node_modules/font-awesome/css/font-awesome.min.css",
            "./node_modules/bootstrap/dist/css/bootstrap.min.css",
            "./node_modules/primeng/resources/themes/omega/theme.css",
            "./node_modules/primeng/resources/primeng.min.css",
            "src/styles.scss"
          ],
  </code></pre>
  
  <p>but when I build the application the fonts looks like:
  <a href="https://i.stack.imgur.com/Ci8EX.png" rel="nofollow noreferrer">spinning cog, spin works icon not so much...</a>
  and when I check the developer tool <a href="https://i.stack.imgur.com/K8dww.png" rel="nofollow noreferrer">the icon looks like this</a>
  I tried to include the font awesome scss in my styles scss
  Like other answers I've seen but to no avail
  can anyone help in this issue?</p>