logo标签列表

如何减小 Font Awesome 图标的大小？

font-awesomefont-awesome-4
44

最好的方法是减小一种Font Awesome图标的大小。有fa-3x等用于增大大小的类，是否有用于缩小大小的类呢？

5个回答
64

正如其名，Font-Awesome图标是基于字体的。这意味着如果要减小它们的大小，您只需减小它们的font-size:即可。

.fa {
    font-size: 12px;
}
2
除了他的回答之外，你可以对字体做的几乎所有事情都可以对图标做。颜色、大小、间距等等都会像字体一样被改变。非常简单！ - Adam Buchanan Smith
35

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

它们的尺寸对应关系如下：

  • fa-xs: .75em
  • fa-sm: .875em

图标大小 | Font Awesome（更多信息请点击此处）

3
在v4中，我使用<i class="fa fa-clone" style="font-size: 12px;"></i>。在v5中改为使用fa-xs/fa-sm。 - mortenma71
11

Font-Awesome图标大小修改：

  1. 在“style”属性中使用“font-size”属性：

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

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

    3.  .fa {
     font-size: 12px;
 }

  3. HTML标签

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

  4. 使用Fontawesome类，使得图标的大小相对于它们的父元素:

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

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

一种方法是使用内部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 大小调整文档，你可以在那里找到相关的css文档。

1

正如其名称所示，Font-Awesome图标是基于字体的。这意味着要缩小它们的大小，您只需要减小它们的font-size：

::before {
    font-size: 130px;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接