changing font size in font awesome icons

1 Views

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:

Read More
<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!

Post Views: 1

Related posts

4 comments

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

  3. Solution:

    Using your main stylesheet, simply add:

    .fa-code {
    font-size: 20px;
}

    The above will target the font awesome code icon only. If you’re wanting to target all the icons, just use:

    .fa {
    font-size: 20px;
}

    Alternatively you can add an in-line style, this isn’t considered good practice but thought I’d 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 20px as an example but just change the value to your needs.
    Hope this helps!

  4. You can use CSS in-line or external 

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

Comments are closed.