How to use Font Awesome Iconic font using CSS

By | September 19, 2015


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.

How to use 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.

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

Download and Demo Links are as: