I'm attempting to incorporate FontAwesome icons into CSS pseudo elements.
When I add the icon using HTML in the traditional manner, it works fine. However, I'm trying to integrate the fonts into a bootstrap accordion so that the icon changes when the accordion is collapsed. The functionality works, but the icon itself does not display properly. In Chrome, there is an empty square, and in Firefox, there is a square with the hexadecimal code.
Here is the kit that I added (I tried loading it before and after the CSS):
<script src="https://kit.fontawesome.com/30fc0982d8.js"></script>
CSS 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';
}
I anticipated the icon would simply appear, but unfortunately, it does not. Any ideas?
Edit: I neglected to mention that I extensively researched this issue and came across several posts suggesting to add font-weight: 900. As you can see, I have already included that.
Edit2: This question was labeled as a duplicate for FontAwesome with JS+SVG, but I am utilizing the webfonts option.