5

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!

G.L.P
  • 7,119
  • 5
  • 25
  • 41
Jeffrey Cunningham
  • 249
  • 2
  • 3
  • 8
  • 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 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

    tags. Then you can use .fa p {text-size 20px;} or to be more specific .fa-(whatever icon your using) p {text-size 20px;}

     – Jeffrey Cunningham Jun 10 '15 at 04:12

4 Answers4

14

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

Sangrai
  • 687
  • 1
  • 6
  • 19
Yeldar Kurmangaliyev
  • 33,467
  • 12
  • 59
  • 101
  • 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 Jun 09 '15 at 01:24
  • 2
    @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. – Mr Lister Nov 10 '16 at 19:32
3

in css selector :

font-size: 4em;
Surabhi Rai
  • 51
  • 4
  • 1
    If you're going to answer a question please add more detailed information: http://stackoverflow.com/help/how-to-answer – Jordan Jun 08 '15 at 10:28
  • 1
    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 Jun 09 '15 at 02:11
2

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.

halfer
  • 19,824
  • 17
  • 99
  • 186
Jordan
  • 1,101
  • 1
  • 12
  • 26
  • 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. – Yeldar Kurmangaliyev Jun 08 '15 at 04:31
  • 1
    Using inline-styles are considered bad practise, I'm not sure what you are trying to say... – Jordan Jun 08 '15 at 04:33
  • I was trying to say that you had 'fa-4x' class described for an `i`. You have edited it. Now, it looks better. – Yeldar Kurmangaliyev Jun 08 '15 at 04:38
  • Yeah I was in the middle of editing when you commented. – Jordan Jun 08 '15 at 04:40
  • Actually this does not work. I have the text placed inside of the 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 Jun 09 '15 at 02:06
  • 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? – Jeffrey Cunningham Jun 09 '15 at 02:22
  • @JeffreyCunningham You shouldn't have to use that selector, the selector I provided in my answer works fine. See fiddle for working demo - http://jsfiddle.net/eh981wze/ – Jordan Jun 09 '15 at 11:36
  • @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. – Jeffrey Cunningham Jun 09 '15 at 21:55
  • @JeffreyCunningham What do you mean "if you write words in it"? Do you mean if you write in-between the `example` tags? – Jordan Jun 10 '15 at 02:01
  • Yes in jsfiddle.net/eh981wze nothing shows up when you write between or inside the 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 Jun 10 '15 at 03:34
  • by the way, this is in the home section 2 widget area of the demo – Jeffrey Cunningham Jun 10 '15 at 03:40
  • If you write in-between the tags it works just fine - http://jsfiddle.net/eh981wze/1/ – Jordan Jun 10 '15 at 12:02
  • 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. – Jordan Jun 10 '15 at 12:04
0

You can use CSS in-line or external 

<i class="fa fa-code fa-6" style="font-size: 7em;"></i>
Sulthan Allaudeen
  • 11,330
  • 12
  • 48
  • 63
Kris1
  • 197
  • 2
  • 7