Custom Colors for the Font Awesome Icon Set

Font Awesome is now a popular medium for using icons instead of images. Generally instead of Image we use Font Awesome  codes and in final o...

Related posts:

Font Awesome is now a popular medium for using icons instead of images. Generally instead of Image we use Font Awesome  codes and in final output viewers can see the graphical interface. Font Awesome  icons are scalable that means you can scale them up or down without losing their quality. Default Font Awesome  icon's color is ash color. But by using some simple code we can make the icons colorful. In this tutorial I will show you how to colorize Font Awesome  icons? I have used Font Awesome 4.3.0 (fa) version for tutorial purpose. Those who are using older Font Awesome 3.0 (icon) version then this will not work.

Simple Icon Coloring

In this section I will show you simple way to make an icon colorful. Font Awesome's default code for integrating in Blog Post are below-

<i class="fa fa-apple" ></i>

By default the icon color will be ash color. And I will add a CSS code for color like below-

<i class="fa fa-apple" style="color:green"></i>

now apple will be Green color.

You can also add Hex code for color generation. like below-

<i class="fa fa-apple" style="color:#038103"></i>

You can also add RGB color code for color generation. like below-

<i class="fa fa-apple" style="color:rgb(3,129,3)"></i>

Icon color with color text

Now I will show you how to add color text with colored icon at a time. The code is below-

<a href="# " style="color:green"><i class="fa fa-apple"></i> An Apple</a>

Similarly In case of Hex color we can use

<a href="# " style="color:#038103"><i class="fa fa-apple"></i> An Apple</a>

Similarly In case of RGB color we can use

<a href="# " style="color:rgb(3,129,3)"><i class="fa fa-apple"></i> An Apple</a>

you can replace # with any  URL. And your Font Awesome Icon and text will be colored.

Icon color by using CSS and Class

Here I will show you about adding pre set CSS code and after that using class we can add the color. The most positive side of this trick you can easily customize the CSS and Class by your own way.

<style>
.white-txt {color:#fff;}
.blue-text {color:#3498db;}
.red-text {color: #e74c3c;}
.green-text {color:#2ecc71;}
.yellow-text {color:#f1c40f;}
.orange-text {color:#e67e22;}
.purple-text {color:#9b59b6;}
</style>

above script are defined with CSS and hex color code has been used but if you  wish you can use RGB color also. you can customize the text with your own. And now add the class on Font Awesome icon.

<i class="fa fa-apple blue-text"></i>

Here in CSS I have declare blue-text color will be blue color that defines Hex #3498db. And When I Have added blue-text with Font Awesome code then color has automatically changed.

I hope this tutorial help you to change Font Awesome icon's color easily. For any further help feel free to leave a comment below.