5

我正在使用 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 部分的字体大小，但它不起作用。有没有更好的方法可以在我的图标下书写，或者应该这样做？

谢谢！

4

4 回答 4

14

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

faCSS 类代表 font-awesome 字体和一般样式。
fa-codeCSS 类代表一个指定的图标。
fa-4xCSS 类代表“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 图标与文本大小相同，则将其完全删除）。

于 2015-06-08T04:17:48.097 回答
3

在 CSS 选择器中：

font-size: 4em;
于 2015-06-08T04:43:37.393 回答
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示例，但只是根据您的需要更改值。希望这可以帮助！

于 2015-06-08T04:20:14.477 回答
0

您可以使用 CSS 内联或外部

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

于 2015-06-08T04:21:43.613 回答