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

Question

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

User · Answer

If you are using Bootstrap at the same time, you can use:

<i class="fa fa-check-circle-o fa-5x text-success" ></i>

Otherwise:

<i class="fa fa-check-circle-o fa-5x" style="color:green"></i>

User · Answer

Simply you can define a class in your css file and cascade it into html file like    lt i class  fa fa-plus fa-lg green  gt  lt  i gt     now write down in css    green  color green

User · Answer

For Font Awesome 5 SVG version  use   filter  drop-shadow 0 0 3px rgba 0 0 0 0 7

User · Answer

I had the same problem when I tried to use the icons directly from BootstrapCDN  the easiest way   Then I downloaded the CSS file and copied it to my site s CSS folder the CSS file  Described under the  easy way  in font awesome documentation   and everything started working as they should

User · Answer

http   fortawesome github io Font-Awesome examples    lt i class  icon-thumbs-up icon-3x main-color  gt  lt  i gt    Here I have defined a global style in my CSS where main-color is a class  in my case it is a light blue hue  I find that using inline styles on Icons with Font Awesome works well  esp in the case when you name your colors semantically  i e  nav-color if you want a separate color for that  etc   In this example on their website  and how I have written in my example as well  the newest version of Font Awesome has changed the syntax slightly of adjusting the size Before it used to be   icon-xxlarge   where now I have to use   icon-3x   Of course  this all depends on what version of Font Awesome you have installed on your environment  Hope this helps

User · Answer

I would not advice you to use built in font-awesome styling like the fa-5x etc  for fear they may change it and you would have to keep chainging your application code to meet up with the latest standard  You simply avoid this by giving each font-awesome class you want to style uniformly the same class say    lt i class  fa fa-facebook-square fa-sabi-social-icons  aria-hidden  true  gt  lt  i gt   lt i class  fa fa-twitter-square fa-sabi-social-icons  aria-hidden  true  gt  lt  i gt   lt i class  fa fa-google-plus-square fa-sabi-social-icons  aria-hidden  true  gt  lt  i gt    Here the class is fa-sabi-social-icons  Then in your css you can the style the fonts using the same css rules you would style a normal font with  e g   fa-sabi-social-icons        color    your color       font-size     your font-size in px  em or         text-shadow  2px 2px  FF0000      That should get your font-awesome fonts styled

User · Answer

For Sizing Icons  Both our Web Fonts   CSS and SVG   JS frameworks include some basic controls for sizing icons in the context of your page   s UI   you can use like   lt i class  fas fa-camera fa-xs  gt  lt  i gt   lt i class  fas fa-camera fa-sm  gt  lt  i gt   lt i class  fas fa-camera fa-lg  gt  lt  i gt   lt i class  fas fa-camera fa-2x  gt  lt  i gt   lt i class  fas fa-camera fa-3x  gt  lt  i gt   lt i class  fas fa-camera fa-5x  gt  lt  i gt   lt i class  fas fa-camera fa-7x  gt  lt  i gt   lt i class  fas fa-camera fa-10x  gt  lt  i gt    https   fontawesome com how-to-use on-the-web styling sizing-icons

User · Answer

text-shadow  1px 1px 3px rgba 0 0 0 0 5

User · Answer

Please refer to the link http   www w3schools com icons fontawesome icons intro asp   lt i class  fa fa-car  gt  lt  i gt   lt i class  fa fa-car  style  font-size 48px   gt  lt  i gt   lt i class  fa fa-car  style  font-size 60px color red   gt  lt  i gt    lt i class  fa fa-car fa-lg  gt  lt  i gt   lt i class  fa fa-car fa-2x  gt  lt  i gt   lt i class  fa fa-car fa-3x  gt  lt  i gt   lt i class  fa fa-car fa-4x  gt  lt  i gt   lt i class  fa fa-car fa-5x  gt  lt  i gt

User · Answer

You can also just add style inline    lt i class  icon-ok-sign  style  color green  gt  lt  i gt    lt i class  icon-warning-sign  style  color red  gt  lt  i gt

User · Answer

Wrap the i tag in p or span  then you can use bootstrap css class   lt p class  text-success  gt  lt i class  fa fa-check  gt  lt  i gt  lt  p gt

User · Answer

inyour css file         icon-white  color  white        icon-silver  color  silver    inyour html file        lt a gt  lt i class  icon-book icon-white  gt  lt  i gt  Book lt  a gt       lt a gt  lt i class  icon-ok-sign icon-silver  gt  lt  i gt  OK lt  a gt

User · Answer

Try to simply use something like fa-lg fa-2x fa-3x fa-4x fa-5x to increase the icon size relative to their container for eg -

User · Answer

There is a really simple way to change the colour of Font Awesome icons     x000D   x000D   lt  -- Font Awesome insert code -- gt  x000D   lt script src  https   use fontawesome com 49b98aaeb5 js  gt  lt  script gt  x000D   lt  -- End -- gt  x000D   lt i class  fa fa-thumbs-up fa-5x  aria-hidden  true  style  color  00cc6a  gt  lt  i gt  x000D   lt i class  fa fa-thumbs-up fa-4x  aria-hidden  true  style  color  00cc6a  gt  lt  i gt  x000D   lt i class  fa fa-thumbs-up fa-3x  aria-hidden  true  style  color  00cc6a  gt  lt  i gt  x000D   lt i class  fa fa-thumbs-up fa-2x  aria-hidden  true  style  color  00cc6a  gt  lt  i gt  x000D   lt i class  fa fa-thumbs-up  aria-hidden  true  style  color  00cc6a  gt  lt  i gt  x000D   x000D   x000D    You can change the hex code to your preference   NOTE  The text colour will change the icon colour as well unless there is a style  color  00cc6a  within the i tag

User · Answer

As it has been pointed out  font awesome icons are text  consequently you style it using the appropriate CSS attributes  For example    fa-twitter-square       font-size  15px      color  red      If  as it happens quite a bit to me  the icon size doesn t change at all  add   important  to the font-size attribute    fa-twitter-square       font-size  15px  important      color  red

User · Answer

Just target font-awesome predefined class name   in ex   HTML   lt i class  fa fa-facebook  gt  lt  i gt     CSS  i fa       color  red      font-size  30px

User · Answer

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

User · Answer

Credit  Can I change the color of Font Awesome  39 s icon color    this answer builds on that answer    for the bookmark icon  for example    inyour css file    icon-bookmark icon-white       color  white      inyour html file    lt div class  icon-bookmark icon-white  gt  lt  div gt

User · Answer

For Size   fa-lg  fa-2x  fa-3x  fa-4x  fa-5x   For Color    lt i class  fa fa-link fa-lg  aria-hidden  true style  color indianred  gt  lt  i gt   For Shadow    fa-linkedin-square text-shadow  3px 6px  272634

User · Answer

In FontAwesome 4 0  the classes change to  fa-2x    fa-3x

User · Answer

Looks like the FontAwesome icon color responds to text-info  text-error  etc    lt div style  font-size  44px   gt      lt i class  icon-umbrella icon-large text-error  gt  lt  i gt   lt  div gt

User · Answer

Dynamically change the css properties of  fa-xxx icons    lt li class  nws  gt   lt a href   NewsModal  class  urgent  title      title      onclick    gt  lt span class  label label-icon label-danger  gt  lt i class  fa fa-bolt  gt  lt  i gt  lt  span gt     lt  a gt   lt  li gt   lt script gt      document  ready function          li nws   on  focusin   function            fa-bolt   addClass  lightning                 lt  script gt    lt style gt   lightning    do something cool like shutter     lt  style gt

User · Answer

Using FA 4 4 0 adding   text-danger     color   d9534f   to the document css and then using     lt i class  fa fa-ban text-danger  gt  lt  i gt    changes the color to red  You can set your own for any color

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

Examples related to css

Examples related to twitter-bootstrap

Examples related to icons

Examples related to styles

Examples related to font-awesome-4