title: Font-awesome icons not displaying correctly
body: <p>Font awesome icons recently stopped displaying. They just appear as small boxes like this everywhere:</p>
  <p><a href="https://i.stack.imgur.com/XQOlG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XQOlG.png" alt="enter image description here" /></a></p>
  <p>Here is the icon in this particular component:</p>
  <pre><code>&lt;i class=&quot;fas fa-trash-alt fa-lg&quot;&gt;&lt;/i&gt;
  </code></pre>
  <p>I have just tried updating Font awesome to version 5 using one their 'kits' on their website here: <a href="https://fontawesome.com/how-to-use/on-the-web/setup/upgrading-from-version-4" rel="nofollow noreferrer">https://fontawesome.com/how-to-use/on-the-web/setup/upgrading-from-version-4</a></p>
  <p>This just tells you to insert this into your head tag:</p>
  <pre><code>&lt;script src=&quot;https://kit.fontawesome.com/c61d55aa48.js&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  </code></pre>
  <p>Which I've done (as I'm using Angular, I've placed this in the index.html file) but the icons are still displaying as above. What am I doing wrong here?</p>