March 16, 2024 4:02 am

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

[wpdm_file id=82]DEMO

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>&nbsp; normal<br>
<div class="fa fa-shield fa-rotate-90"></div>&nbsp; fa-rotate-90<br>
<div class="fa fa-shield fa-rotate-180"></div>&nbsp; fa-rotate-180<br>
<div class="fa fa-shield fa-rotate-270"></div>&nbsp; fa-rotate-270<br>
<div class="fa fa-shield fa-flip-horizontal"></div>&nbsp; fa-flip-horizontal<br>
<div class="fa fa-shield fa-flip-vertical"></i>&nbsp; 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.

[wpdm_file id=82]DEMO

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:

3 responses to “How to use Font Awesome Iconic font using CSS”

  1. nilesh says:

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

    • huzoorbux says:

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

      
      a {
          color: #0060B6;
          text-decoration: none;
      }
      
      a:hover 
      {
           color:#00A0C6; 
           text-decoration:none; 
           cursor:pointer;  
      }
      
      
  2. Furutan says:

    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?

Leave a Reply

Your email address will not be published. Required fields are marked *