title: How to add fontawesome fonts in css pseudo elements
body: <p>I'm trying to add FontAwesome icons to css pseudo elements</p>
  
  <p>If I add the icon using html in the regular way it does work, but I'm trying to add the fonts to a bootstrap accordion so the icon changes in the collapsed state. That part works, but the icon is not showing. Instead there is a empty square in chrome and a square with the hex code in firefox.</p>
  
  <p>Added kit (tried before and after css is loaded):</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;script src="https://kit.fontawesome.com/30fc0982d8.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>CSS code:</p>
  
  <pre class="lang-css prettyprint-override"><code>#faq a:after{
      display: inline-block;
      font-style: normal;
      font-variant: normal;
      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
      font-family: 'Font Awesome 5 Free';
      font-weight: 900;
      content: '\f107';
  
  }
  
  #faq a.collapsed:after{
      display: inline-block;
      font-style: normal;
      font-variant: normal;
      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
      font-family: 'Font Awesome 5 Free';
      font-weight: 900;
      content: '\f106';
  }
  </code></pre>
  
  <p>I would expect the icon to just show, but it doesn't. Any thoughts?</p>
  
  <p>Edit: Forgot to add, I did some extensive searching on this and found several posts. Typically the solution was to add <code>font-weight: 900</code>, but as you can see I already did that.<br>
  Edit2: This question was marked duplicate but for FontAwesome with JS+SVG. I'm using the webfonts option. </p>