没有衬线字体的Fontawesome答案

【问题标题】：Fontawesome without serif font没有衬线字体的Fontawesome
【发布时间】：2019-04-30 18:01:47
【问题描述】：

我有以下代码：

<a href="#home">
 <i class="fas fa-chart-bar fa-lg">
  <span class="card-text card-textWithIcon">serif font</span>
 </i>
</a>

它显示一个图像和一个简短的文本。它工作正常，但文本是衬线字体。如何切换到无衬线字体？

我正在使用 Bootstrap 4 和 Fontawesome 5.8.1

编辑 1：我加了

font-family:sans-serif !important

到 .fa 类。但随后图标显示为矩形（这是错误的）。

编辑 2：我添加了两个新类：

.span {
    font-family:Sans-Serif
}

.sansserif {
    font-family:Sans-Serif
}

并将 .sansserif 添加到 span-element：

<span class="card-text card-textWithIcon sansserif">serif font</span>

但这不起作用。

解决方案：参见 elveti 的第二条评论 "你不应该在你的 图标中添加额外的内容。把它放在后面，比如 serif font – elveti 2 mins ago"

【问题讨论】：

您不应在 图标中添加其他内容。放在后面，比如serif font

标签： css

【解决方案1】：

您应该使用 Font Awesome 作为所有 i 标签的字体系列，然后将 Sans-Sarif 用于其他所有内容或您想要使用它的什么

i.fas {
  font-family: 'Font Awesome\ 5 Free' !important;
  font-style: none
}

* {
  font-family:Sans-Serif;
}

【讨论】：

【解决方案2】：

试试下面的方法。您可以将 font-family 设置为根元素或body 标签。

body {
  font-family:Sans-Serif;
}
a .fas {
  font-family: "Font Awesome 5 Free";
}
.card-text {
  font-family: Sans-Serif;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<a href="#home">
 <i class="fas fa-chart-bar fa-lg">
  <span class="card-text card-textWithIcon">serif font</span>
 </i>
</a>

【讨论】：