在 css 中更改超棒的字体大小。你怎么做呢?
Changing font-awesome size in css. How do you do it?
我尝试使用 font-size 更改超棒的字体大小,但由于这个原因它不起作用 css:
font-size: inherit
有没有办法覆盖它?我试图让 font-awesome 在移动设备或屏幕上有两种不同的大小,我想使用 css 而不是不同大小的 font-awesome 标签来影响字体大小。我能做什么?
通常字体超棒的图标会获得它们在其中使用的元素的大小(即继承)。例如:
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
}
您可以使用 before 伪元素更新 FA 图标的字体大小。不需要额外的包装元素或重写 类.
i.fa::before{
font-size: 40px;
}
您可以使用额外的 class 或 ID,例如
<i class="fa fa-search large_icon"></i>
及其使用的样式 css
.large_icon{
font-size:24pt;
}
font awesome 具有 类 大小,例如 fa-2x、fa-3x 等...
例如:
<i class="fas fa-user fa-2x">
我尝试使用 font-size 更改超棒的字体大小,但由于这个原因它不起作用 css:
font-size: inherit
有没有办法覆盖它?我试图让 font-awesome 在移动设备或屏幕上有两种不同的大小,我想使用 css 而不是不同大小的 font-awesome 标签来影响字体大小。我能做什么?
通常字体超棒的图标会获得它们在其中使用的元素的大小(即继承)。例如:
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
}
您可以使用 before 伪元素更新 FA 图标的字体大小。不需要额外的包装元素或重写 类.
i.fa::before{
font-size: 40px;
}
您可以使用额外的 class 或 ID,例如
<i class="fa fa-search large_icon"></i>
及其使用的样式 css
.large_icon{
font-size:24pt;
}
font awesome 具有 类 大小,例如 fa-2x、fa-3x 等...
例如:
<i class="fas fa-user fa-2x">