Advertisement
Advertisement


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

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

2020/04/06
1
374
4/6/2020 3:00:40 PM

Accepted 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;
}
479
9/4/2012 10:50:45 PM

You can also just add style inline:

<i class="icon-ok-sign" style="color:green"></i>

<i class="icon-warning-sign" style="color:red"></i>
2013/03/11

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>
2014/10/21

Looks like the FontAwesome icon color responds to text-info, text-error, etc.

<div style="font-size: 44px;">
   <i class="icon-umbrella icon-large text-error"></i>
</div>
2012/09/27

inyour.css file:

    *.icon-white {color: white}
    *.icon-silver {color: silver}

inyour.html file:

    <a><i class="icon-book icon-white"></i> Book</a>
    <a><i class="icon-ok-sign icon-silver"></i> OK</a>
2013/09/13

There is a really simple way to change the colour of Font Awesome icons.

<!-- Font Awesome insert code -->
<script src="https://use.fontawesome.com/49b98aaeb5.js"></script>
<!-- End -->
<i class="fa fa-thumbs-up fa-5x" aria-hidden="true" style="color:#00cc6a"></i>
<i class="fa fa-thumbs-up fa-4x" aria-hidden="true" style="color:#00cc6a"></i>
<i class="fa fa-thumbs-up fa-3x" aria-hidden="true" style="color:#00cc6a"></i>
<i class="fa fa-thumbs-up fa-2x" aria-hidden="true" style="color:#00cc6a"></i>
<i class="fa fa-thumbs-up" aria-hidden="true" style="color:#00cc6a"></i>

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.

2017/09/07