Custom Colors for the Font Awesome Icon Set
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 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.
2 comments