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

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财产的影响.

faCSS类代表font-awesome字体和一般样式.
fa-codeCSS类代表指定的图标.
fa-4xCSS类代表"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图标是文本的大小相同,在全部删除).