Menu
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!
333
To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2x , fa-3x , fa-4x , or fa-5x classes. If your icons are getting chopped off on top and bottom, make sure you have sufficient line-height.
Select the SVG of font-awesome located in your extracted zip inside fonts. Repeat the procces uploading your own svg files. Inside Home (at the header of the page) Select the icons you want to download, customize them to give your custom names and select publish to have a link or download the fonts and css.
Sizing on the Smaller Side Font Awesome's icons are designed to render crisply at the equivalent of 16px . While we provide utilities to decrease their size, it's industry and our best practice to avoid rendering important UI symbols at very small sizes as they are tougher to read and understand.
Also, you should not change font-awesome.css file. 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). Show activity on this post.
go to Advanced Appearance[&Icons&].Windows 10 Change Font Of Icons Change the icon font and its size to anything you want.
You can also directly style an icon's size by setting a font-size in your project's CSS that targets an icon or directly in the style attribute of the HTML element referencing an icon. If you're using our SCSS or Less CSS pre-processor options, you can tweak the _larger.scss or _larger.less partial with your own scale.
1) You can rewrite 'fa' class styles from font-awesome.css in your own css file: .fa { font-size: 3em !important; /*size whatever you like*/ }
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).
103
in css selector :
font-size: 4em;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With