Question

我有以下代码：

<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元素：

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

但这没用。

解决方案：请参阅elveti的第二条评论 “您不应在图标中添加其他内容。将其放到后面，例如 serif字体– 2分钟前出现在elveti上”。

Answer 1

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

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

* {
  font-family:Sans-Serif;
}

Answer 2

尝试以下方法。您可以将字体家族设置为根元素或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>

没有衬线字体的Fontawesome

2 个答案: