Question

我尝试使用font-size更改字体非常棒的大小，但由于此css它无法正常工作：

font-size: inherit

有没有办法覆盖这个？我想在移动或屏幕时让字体很棒，两种不同的尺寸，我想用css影响字体大小而不是不同大小的字体 - 真棒标签。我该怎么办？

Answer 1

通常，font-awesome图标会获得它们在其中使用的元素的大小（即继承）。例如：

HTML

$ babel foo.js

CSS

<p><i class='fa fa-pencil'></i> Some text here.</p>

在这种情况下，您的图标大小为16像素。但是，您可以单独调整图标大小。首先，请确保您的css文件位于p{ font-size: 16px; }块中的font-awesome.css之后，以使其处于priopity或使用！important。

1）您可以在自己的css文件中重写font-awesome.css中的'fa'类样式：

<head>

2）或者给图标一些其他类并设置它的样式：

.fa{
    font-size: 3em !important; /*size whatever you like*/
}

要为移动和屏幕设置不同的样式，请使用css媒体查询：

.newclass-for-i{
    font-size: 3em;
}

Answer 2

font awesome 有大小类，例如 fa-2x、fa-3x 等...

例如：

<i class="fas fa-user fa-2x">

Answer 3

您可以使用before伪元素更新FA图标的字体大小。无需额外的包装元素或重写类。

i.fa::before{
    font-size: 40px;
}

Answer 4

你可以使用额外的类或id，例如

<i class="fa fa-search large_icon"></i>

和使用css的样式

.large_icon{
   font-size:24pt;
}