Custom Colors for the Font Awesome Icon Set

Custom Colors for the Font Awesome Icon Set

2
data:blog.title
colored icons

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>

green apple

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-

green apple with URL
<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>

blue apple

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. 
Custom Colors for the Font Awesome Icon Set
4 Stars stars - "Custom Colors for the Font Awesome Icon Set" Font Awesome is now a popular medium for using icons instead of images. Generally instead of I...

Post a Comment

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *