Using Latest Stable Font Awesome Cdn Breaks Icons
I'm Setting up Blog for My Brand on Blogger and I'm Trying to Link My Social Accounts: I'm Going with a Cdn Link Within the Header Tag:
I'm setting up blog for my brand on Blogger and I'm trying to link my social accounts:
I'm going with a CDN link within the header tag:
<link href=' rel='stylesheet'/>
within footer tag:
<a class='fb' href='#' rel='nofollow' target='blank' title='Follow Us On Instagram'><i class='fa fa-instagram'/></a>
<a class='twt' href='#' rel='nofollow' target='blank' title='Follow Us On Twitter'><i class='fa fa-twitter'/></a>
<a class='in' href='#' rel='nofollow' target='blank' title='Follow Us On Mastodon'><i class='fa fa-mastodon'/></a>
the classes are just for styling. Background color. So it doesn't affect rendering of the icons in any way.
icons render broken:
Any suggestions ?
1 Answer
Font Awesome 5 and above needs a font-weight: 900
You'll need to add to your CSS something like
i.fa,
i.fas {
font-weight: 900;
}
or if you use the CSS Pseudo-elements with a class, something like:
.your_class::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f007";
}
More info: and
Alexander Ross has covered the video game industry for a decade, writing deep dives on game design, esports tournaments, VR developments, and gaming culture.
