Change font size in fonts awesome icons
I am using paralax pro genesis child theme, so I am working in widget area.
I'm not sure if I'm going to do it right, but I tried to write an awesome icon below the font 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 resize the text? I tried to change the font size in the .fa code section in awesome css font, but it doesn't work. Is there a better way I could write under my icon or is this the way it should be done?
Thank!
source to share
Actually, font icons are text characters. This means that its size is affected by a property font-size
.
fa
CSS class stands for font-awesome font and general styles. fa-code
The CSS class denotes the specified icon. fa-4x
CSS class stands for "font-size: 4em;"
This means that when you include your text in the FA box, the entire text will be enlarged 4 times. Your example shouldn't have any text in the tag <i>
.
<i class="fa fa-code fa-4x"></i>
Fully mobile responsive designs that adjust to fit all platforms
You can now manipulate the text outside of your tag i
as usual.
See below for a 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>
See it here: http://jsfiddle.net/c3Lbcmjb/
Also, you shouldn't modify the file font-awesome.css
.
It provides you with many convenient ways to control sizes, fonts, colors, and more.
If you want to manipulate the size of the FA icon, change the class fa-4x
to fa-3x
, fa-2x
etc. (or remove it altogether if you want the FA icon to be the same size as your text).
source to share
Decision:
Using your main stylesheet, just add:
.fa-code {
font-size: 20px;
}
The above is only for the font character icon. If you want to target all icons, just use:
.fa {
font-size: 20px;
}
Alternatively you can add style to the line, this is not considered good practice, but I thought I would explain both ways.
<i class="fa fa-code" style="font-size: 20px;">Fully mobile responsive designs that adjust to fit all platforms</i>
I used it 20px
as an example, but just changed the value to suit your needs. Hope this helps!
source to share