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!

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

Solution 2

in css selector :

font-size: 4em;

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

Comments

[Jeffrey Cunningham]

Ok, I have come to a conclusion on the best way to accomplish editing text for font awesome icons within a text widget area of the parallax pro theme. If you place the text inside the <i> tags as shown above and try to target the text in css using .fa or .fa-code you will be targeting not only the text but the whole icon. Therefore you must make a separate element within the font awesome icon by wrapping your text in <p> tags. Then you can use .fa p {text-size 20px;} or to be more specific .fa-(whatever icon your using) p {text-size 20px;}

[Yeldar Kurmangaliyev]

I am not sure that it is what people call "isn't considered a good practice". You describe an i tag with class fa-4x which means "font-size: 4em;". Then, you describe inline style "font-size: 20px;" which overrides FA CSS class.

[Jordan]

Using inline-styles are considered bad practise, I'm not sure what you are trying to say...

[Yeldar Kurmangaliyev]

I was trying to say that you had 'fa-4x' class described for an i. You have edited it. Now, it looks better.

[Jordan]

Yeah I was in the middle of editing when you commented.

[Jordan]

If you're going to answer a question please add more detailed information: stackoverflow.com/help/how-to-answer

[Jeffrey Cunningham]

Thanks a lot! This is probably the best way to go about it so the text doesn't get tied up in the font awesome styling.

[Jeffrey Cunningham]

Actually this does not work. I have the text placed inside of the <i> tags and created the following code in my main css file: .fa-code { margin-left: 75px; margin-right: 75px; font-size: 100px; The margin code works but the text does not change size.

[Jeffrey Cunningham]

Thank you for your help, but this does not work. I placed for following in my main css file: .fa-code { margin-left: 75px; margin-right: 75px; font-size: 100px; the margin code does exactly what I want but the text size does not change. Any idea why?

[Jeffrey Cunningham]

Hey Jordan I figured it out. The selector I needed to use was i.fa.fa-code What would be causing it to use such a weird selector?

[Jordan]

@JeffreyCunningham You shouldn't have to use that selector, the selector I provided in my answer works fine. See fiddle for working demo - jsfiddle.net/eh981wze

[Jeffrey Cunningham]

@jordan But if you write words in it they don't show up. I have tried this exact thing in the parallax pro theme and the text size does not change.

[Jordan]

@JeffreyCunningham What do you mean "if you write words in it"? Do you mean if you write in-between the <i>example</i> tags?

[Jeffrey Cunningham]

Yes in jsfiddle.net/eh981wze nothing shows up when you write between or inside the <i> tags, but that is beside the point. I'm still not able to get the font size to change in my theme. I'll update here when I find a solution as to what is going on. If you have the parallax pro child theme and a sec to spare try using the fa-code font awesome icon then going in the main css file and using .fa-code { font-size: 20px; } to see what I'm talking about.

[Jeffrey Cunningham]

by the way, this is in the home section 2 widget area of the demo

[Jordan]

If you write in-between the tags it works just fine - jsfiddle.net/eh981wze/1

[Jordan]

and I'm afraid I don't, I've never really used any themes before. I've always coded everything from scratch. Apart from certain frameworks of course.

[Mr Lister]

@JeffreyCunningham You could consider marking this answer as correct, so that it no longer shows up on the list of unanswered questions. That will prevent new answers (such as the most recent one) to be added randomly.