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.
We are showing very few samples of Font Awesome click here for more options and complete documentation.
CSS Font include
@font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.0.3');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
Above we included font files in CSS to create icons.
CSS and HTML for home icon:
<style>
.fa-home:before {
content: "\f015";
}
.fa {
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>
<div class="fa fa-home"></div>
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.
<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
//Add icons files as below
<div class="fa fa-home"></div>
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.
<style>
.fa-2x {
font-size: 2em;
}
.fa-3x {
font-size: 3em;
}
.fa-4x {
font-size: 4em;
}
.fa-5x {
font-size: 5em;
}
</style>
These classes defined for different sizes of your icons.
<div class="fa fa-home fa-5x"></div>
<div class="fa fa-home fa-4x"></div>
<div class="fa fa-home fa-3x"></div>
<div class="fa fa-home fa-2x"></div>
Home Icon with different sizes.
There is also motion icons available in this library you can add spinner using below markup.
<div class="fa fa-spinner fa-spin fa-3x"></div>
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.
<style>
.fa-color_red {
color: #FF0000;
}
</style>
<div class="fa fa-home fa-3x fa-color_red"></div> Red color home icon like that you can define as many as you can.
I have added some CSS for extra colors in this library.
.fa-color_facebook {
color: #3b5998;
}
.fa-color_android {
color: #a4c639;
}
.fa-color_gplus {
color: #dd4b39;
}
.fa-color_linkedin {
color: #0e76a8;
}
.fa-color_pintrest {
color: #c8232c;
}
.fa-color_twitter {
color: #55acee;
}
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-*.
<div class="fa fa-shield"></div> normal<br>
<div class="fa fa-shield fa-rotate-90"></div> fa-rotate-90<br>
<div class="fa fa-shield fa-rotate-180"></div> fa-rotate-180<br>
<div class="fa fa-shield fa-rotate-270"></div> fa-rotate-270<br>
<div class="fa fa-shield fa-flip-horizontal"></div> fa-flip-horizontal<br>
<div class="fa fa-shield fa-flip-vertical"></i> icon-flip-vertical
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.
