I have been updating a theme from fontawesome 4 to 5, and everything seems to be working fine except for one specific icon that is displayed as a css pseudo-element.
Even though I followed the guidelines in the FA docs, the icon still does not appear. It doesn't show up as a square or anything, just plain nothing.
Here are the codes that are being used. The goal is to display an icon in the middle of the hr:
HTML head:
<link href="css/font-awesome/css/all.min.css" rel="stylesheet" type="text/css">
HTML body:
<hr class="star-light">
CSS:
hr.star-light:after {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f005";
display: inline-block;
position: relative;
top: -.8em;
padding: 0 .25em;
font-size: 2em;
font-style: normal;
font-variant: normal;
text-decoration: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
I also tried running a conflict detection script which found that there was only one conflict, the fa's css itself all.min.css. However, I'm unsure if this is related to the problem. I've been stuck on this issue for 2 hours now and my searches haven't yielded any relevant information. Does anyone have an idea of what might be causing this? Or any suggestions I can try?
For those who would like to investigate further, here's the link to the whole repository. It's a hugo theme and my repo already includes fontawesome 5: https://github.com/maxlefou/hugo-freelancer-theme
EDIT: I was able to identify the issue. It turns out that the problem only occurs on Chrome and Chromium browsers. Everything works perfectly fine on Firefox. Go figure...
Thank you for your assistance.