CODEWITHSUNDEEP
wordpresscssfont-awesomegenesis
Jeffrey Cunningham
Jeffrey Cunningham

Reputation: 249

changing font size in font awesome icons

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!

Upvotes: 5

Views: 24012

Answers (4)

Jordan
Jordan

Reputation: 1121

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.

Upvotes: 2

Yeldar Kurmangaliyev
Yeldar Kurmangaliyev

Reputation: 34189

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

Upvotes: 14

Surabhi Rai
Surabhi Rai

Reputation: 51

in css selector :

font-size: 4em;

Upvotes: 3

Kris1
Kris1

Reputation: 197

You can use CSS in-line or external 

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

Upvotes: 0

Related Questions