nanami said:
Here's a link to my custom CSS, minus the emoji codes:
I hope this helps.
Okay, looking over it I was able to see why the icons weren't loading on my browser. It's because the "*" block at the beginning of your CSS overrides ALL font choices, but the Overpass font doesn't have those Font Awesome glyphs encoded into it, so it reverts to the browser default which is Arial on mine, which doesn't show anything either. To fix the Font Awesome icons, I just had to specify that those class items get the Font Awesome 5 Pro font, and since a class has a higher specificity than the "*", that's the font that will be correctly used.
.far, .fas {
font-family: "Font Awesome 5 Pro";
}
I believe I found all of the classes, but if there are any missing, then just inspect the missing icon using the dev console to find the base class.
Also, on a side note, one of your import lines is consistently causing faulty network calls since the line isn't formatted correctly.
@import url("https://fonts.googleapis.com/css?family=Russo+One");
The above loads the following section in addition to what you want:
/* sampled usage */
@font-face {
font-family: 'Russo One';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/stats/Russo+One/normal/400);
unicode-range: U+20;
}
However, that URL is bogus so it always errors out on every single page load. To get the same fonts that you want without the bogus section above, just specify the font weight at the end.
@import url("https://fonts.googleapis.com/css?family=Russo+One:400");