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

Question

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

Answer 1

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

.fa {
    font-size: 12px;
}

Answer 2

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

尺寸等价物是：

• 传真： .75em
• fa-sm: .875em

尺寸图标 | 字体真棒（更多信息在这里）

Answer 3

Font-Awesome 图标大小修改：

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

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

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

    .fa {
        font-size: 12px;
    }
   

3. HTML 标签

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

4. 使用Fontawesome 类，以便图标采用相对于其父元素的大小：

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

Answer 4

一种方法是您的内部 CSS 类或使用默认的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也可以在此处找到文档。

Answer 5

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

::before {
    font-size: 130px;
}