在 css 中更改超棒的字体大小。你怎么做呢？

Question

我尝试使用 font-size 更改超棒的字体大小，但由于这个原因它不起作用 css:

font-size: inherit

有没有办法覆盖它？我试图让 font-awesome 在移动设备或屏幕上有两种不同的大小，我想使用 css 而不是不同大小的 font-awesome 标签来影响字体大小。我能做什么？

Answer 1

通常字体超棒的图标会获得它们在其中使用的元素的大小（即继承）。例如：

HTML

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

CSS

p{
   font-size: 16px;
}

在这种情况下，您的图标大小为 16px。但是，您可以单独调整图标的大小。首先，确保您的 css 文件位于 <head> 块中的 font-awesome.css 之后，以便优先使用或使用 !important.

1) 您可以在自己的 css 文件中重写 'fa' class 字体中的 awesome.css 样式：

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

2) 或者给图标一些其他的 class 并设置样式：

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

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

@media (max-width:desired width){
    your styles
}

Answer 2

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

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

Answer 3

您可以使用额外的 class 或 ID，例如

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

及其使用的样式 css

.large_icon{
   font-size:24pt;
}

Answer 4

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

例如：

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

Changing font-awesome size in css. How do you do it?