使用最新的稳定字体 awesome cdn 会破坏图标

Question

我正在 Blogger 上为我的品牌设置博客，并且我正在尝试链接我的社交 帐户：

我将在标题标签中使用 CDN 链接：

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

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

图标渲染损坏：

有什么建议吗？

Answer 1

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";
  }

更多信息：https://fontawesome.com/v5.15/how-to-use/on-the-web/referencing-icons/basic-use 和 https://fontawesome.com/v5.15/how-to-use/on-the-web/advanced/css-pseudo-elements