February 22, 2014 4:41 pm

How to use Font Awesome Iconic font using CSS

Font Awesome is a CSS library which gives you vector icons (which are all based on mathematical expressions, to represent images in computer graphics.) that can be easily customize with power of CSS like size, color or drop shadow etc. Basically this Font Awesome was designed for Bootstrap and now all the web designers adopting it and creating themes with very few images or no images.

Font Awesome iconic font using CSS

We are showing very few samples of Font Awesome click here for more options and complete documentation.

CSS Font include

Above we included font files in CSS to create icons.

CSS and HTML for home icon:

You don’t need to add any css in your HTML just include css file which is available for download and include in your website like below.

This markup show you a home icon class used fa-home for home icon.

you can create any size image with adding these classes fa-5x, 4x, 3x etc will increase icon size or you can add your own class with your required size of icon.

These classes defined for different sizes of your icons.

Home Icon with different sizes.

There is also motion icons available in this library you can add spinner using below markup.

This will show you a spinning icon and very interesting feature is that you can spin any icon just including this class fa-spin and your icon rotate clock wise.

By default it show black icos but you can change color of icons very easily by creating a color class like below.

I have added some CSS for extra colors in this library.

You can add your color codes as per your theme.

An other feature in this library is rotate elements in degrees like arrows direction no need of 4 arrows there is only one arrow you can move it in any direction in which you need just using this class fa-rotate-* and to flip fa-flip-*.

This example rotate and flip a shield icon.

You can see many icons in live demo and download script to use in your own themes.

For complete icons cheat sheet contain around 400+ icons click here.

I hope you like this simple but very useful tutorial please don’t forget to give your feedback in comments.

Author Huzoor Bux

I am Huzoor Bux from Karachi (Pakistan). I have been working as a PHP Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically I am a PHP developer but now days exploring more in HTML5, CSS and jQuery libraries.


Tutorial Categories:
  • nilesh

    Very nice! but how to give link to these icons.. because if I put that div inside anchor tag.. icon becomes blue

    • huzoorbux

      Use CSS to make changes in anchor color text decoration like below

  • Furutan

    I know this sounds lame, but it is possible to use FontAwesome like a webfont – drop a string into the header, create a font family, then use it like a normal font?