使用最新的稳定字体真棒 CDN 中断图标

问题描述

我正在 Blogger 上为我的品牌建立博客，并尝试链接我的社交媒体帐户：

<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/fontawesome.min.css' rel='stylesheet'/>

在页脚标签内：

<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>

这些类仅用于样式。背景颜色。所以它不会以任何方式影响图标的呈现。

图标呈现损坏：

有什么建议吗？

解决方法

Font Awesome 5 及更高版本需要 font-weight: 900

您需要在 CSS 中添加类似

i.fa,i.fas {
  font-weight: 900;
}

或者如果你使用带有类的 CSS 伪元素，例如：

.your_class::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900; 
    content: "\f007";
  }

blogger font-awesome font-awesome-5