Question

我正在使用parallax pro genesis儿童主题，因此我在小部件区域内工作。

我不确定我是否以正确的方式解决这个问题，但我尝试在小部件区域中使用字体真棒图标进行编写：

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

它有效，但文字很大。我怎样才能改变文字的大小？我试图更改字体awesome css文件夹中的.fa-code部分的字体大小，但它不起作用。有没有更好的方法可以在我的图标下写作，或者这是怎么做的？

谢谢！

Answer 1

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

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

这意味着当您在FA范围中包含文本时，整个文本将增加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

在css选择器中：

font-size: 4em;

Answer 3

<强>解决方案：

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

.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 4

您可以使用CSS在线或外部

＆＃13;

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

＆＃13;

Answer 5

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

我认为这将解决您的问题。你必须用标签或标签分隔标签和句子。

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

5 个答案: