changing font size in font awesome icons

Question

I'm using the parallax pro genesis child theme, so I'm working within a widget area.

I'm not sure if I'm going about this the right way but I tried to write under a font awesome icon by doing this in the widget area:

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

It works but the text is huge. How can I go about changing the size of the text? I have tried to change the font-size in the .fa-code section in the font awesome css folder but it does not work. Is there a better way I could go about writing under my icon or is this how it should be done?

Thanks!

Answer 1

Actually, font-awesome icons are text symbols. It means that it's size is affected by font-size property.

fa CSS class stands for font-awesome font and general styles.
fa-code CSS class stands for a specified icon.
fa-4x CSS class stands for "font-size: 4em;"

It means that when you include your text in FA span, the whole text will be increased 4 times. There should be NO text within <i> tag in your example.

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

Now, you can manipulate with the text outside your i tag as usual.

See below working example:

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

Look here: http://jsfiddle.net/c3Lbcmjb/

Also, you should not change font-awesome.css file.
It provides you with many convenient ways to control sizes, fonts, colors etc.

If you want to manipulate with the size of an FA icon, change fa-4x class to fa-3x, fa-2x etc. (or remove it at all if you need the FA icon to be the same size of your text).