更改字体真棒图标中的字体大小

Question

我正在使用 parallax pro genesis 子主题，所以我在小部件区域内工作。

我不确定我是否以正确的方式进行此操作，但我尝试通过在小部件区域执行此操作来在字体真棒图标下书写：

<i class="fa fa-code fa-4x">Fully mobile responsive designs 
that adjust to fit all platforms</i>

它有效，但文字很大。如何更改文本的大小？我试图在 font awesome css 文件夹的 .fa-code 部分更改字体大小，但它不起作用。有没有更好的方法可以在我的图标下书写，或者应该这样做？

谢谢！

Answer 1

实际上，字体真棒图标是文本符号。这意味着它的大小受font-size属性的影响。

fa CSS class 代表 font-awesome 字体和一般样式。
fa-code CSS class 代表指定图标。
fa-4x CSS class 代表“font-size: 4em;”

这意味着当您将文本包含在 FA span 中时，整个文本将增加 4 倍。在您的示例中，<i> 标记内不应有任何文本。

<i class="fa fa-code fa-4x"></i> 
Fully mobile responsive designs that adjust to fit all platforms

现在，您可以像往常一样使用 i 标记之外的文本进行操作。

请参阅下面的工作示例：

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="row text-center">
  <i class="fa fa-code fa-4x"></i>
</div>
<div class="row text-center">    
  <span class="red-text-for-example">Fully mobile responsive designs that adjust to fit all platforms</span>
 </div>

看这里：http://jsfiddle.net/c3Lbcmjb/

此外，您不应更改 font-awesome.css 文件。
它为您提供了许多方便的方式来控制大小、字体、颜色等。

如果您想使用 FA 图标的大小进行操作，请将 fa-4x 类更改为 fa-3x、fa-2x 等（如果您需要 FA 图标与您的大小相同，则将其完全删除）文本）。

Answer 2

解决方案：

使用您的主样式表，只需添加：

.fa-code {
    font-size: 20px;
}

以上将仅针对字体真棒代码图标。如果您想定位所有图标，只需使用：

.fa {
    font-size: 20px;
}

---

或者，您可以添加内联样式，这不是很好的做法，但我想我会同时解释这两种方式。

<i class="fa fa-code" style="font-size: 20px;">Fully mobile responsive designs that adjust to fit all platforms</i>

我以20px 为例，但只是根据您的需要更改值。 希望这会有所帮助！

Answer 3

您可以使用内嵌或外置的 CSS

<i class="fa fa-code fa-6" style="font-size: 7em;"></i>

Answer 4

在 CSS 选择器中：

font-size: 4em;