Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to style icon color, size, and shadow of Font Awesome Icons

How could I style the color, size and shadow of icons from Font Awesome's Icons?

For example, Font Awesome's site will show some icons in white and some in red but won't show the CSS for how to style them that way ...

Buttons and links of different colours, with both red, white and black icons next to them

like image 638
Elias7 Avatar asked Sep 04 '12 22:09

Elias7


People also ask

How do I change the color of font awesome icons?

To change the color of the icons, simply add or change the “color” property in the CSS. So to change the color of the icons to red in the above example, add “color:red” to the .

Can I color font awesome icons?

You can customize Font Awesome Icon fa Icon Fa as per your requirement, suppose that you need to chnage the color of Fa icon or change the size of size. It is pretty simple to change color of icon Fa just add style="color:red" it will make font color red.

How do I change the icon size in awesome font?

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.

Can I modify font awesome icons?

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.


1 Answers

Given that they're simply fonts, then you should be able to style them as fonts:

#elementID {     color: #fff;     text-shadow: 1px 1px 1px #ccc;     font-size: 1.5em; } 
like image 195
David Thomas Avatar answered Sep 28 '22 01:09

David Thomas