如何减小字体真棒图标的大小？

Posted 2023-02-22

【中文标题】如何减小字体真棒图标的大小？

【英文标题】：How do I decrease the size of a font-awesome icon?

【发布时间】：2015-11-06 15:46:46

【问题描述】：

减小字体真棒图标大小的最佳方法是什么。有fa-3x等……增加尺寸。有没有类可以减小尺寸？

【参考方案1】：

Font-Awesome 图标，顾名思义，是基于字体的。这意味着要减小它们的大小，您所要做的就是减小它们的font-size:

.fa 
    font-size: 12px;

【讨论】：

为了补充他的答案，几乎可以对字体执行的所有操作都可以对图标执行。颜色，尺寸，间距等。等等。一切都变了，就好像它是一种字体一样。超级简单！

【参考方案2】：

如果您需要一些简单的东西，可以使用两个 Font Awesome 类：fa-xs 和 fa-sm。

尺寸等价物是：

fa-xs:

.75em

fa-sm:

.875em

Sizing Icons | Font Awesome（更多信息在这里）

【讨论】：

在 v4 中我这样做：。在 v5 中：fa-xs/fa-sm

【参考方案3】：

Font-Awesome 图标大小修改：

“style”属性中的“font-size”属性：

 <i class="fas fa-search" style="font-size: 25px;"></i>

CSS 样式表中的“font-size”属性（如接受的答案所示）

 .fa 
     font-size: 12px;
 

html 标签

 <small>
     <i class="fas fa-search"></i>
 </small>

使用Fontawesome classes 使图标采用相对于其父元素的大小：

 <i class="fas fa-search fa-sm"></i>

 <i class="fas fa-search fa-lg"></i>

【参考方案4】：

一种方法是您的内部 CSS 类或使用 default Font Awesome 类：

<i class="fas fa-camera fa-xs"></i>

<i class="fas fa-camera fa-sm"></i>

<i class="fas fa-camera fa-md"></i>

<i class="fas fa-camera fa-lg"></i>

<i class="fas fa-camera fa-2x"></i>

继续使用 fa-4x 等等。

智能使用图标的文档可以在这里找到Font Awesome Docs Sizing，您可以使用的css也可以在那里找到文档。

【参考方案5】：

Font-Awesome 图标，顾名思义，是基于字体的。这意味着要减小它们的大小，您所要做的就是减小它们的font-size：

::before 
    font-size: 130px;