Font Awesome Icons Introduction

Here we will learn how to use font awesome icons in html page with example, change style and size of font awesome icons, fixed width font awesome icons example, list icons in font awesome, bordered and pulled icons in font awesome, animation icons in font awesome, rotate and flip a font awesome icons with example and stacked icons in font awesome with example.

Font Awesome Icons Introduction

Font Awesome is an iconic font and css toolkit. Font Awesome provides scalable vector icons that can be easily customizable in size, color, drop shadow, and anything that can be done using CSS.

Font Awesome Icons Setup

To setup Font Awesome icons we don’t need any script files just by adding single line of code to our website we can use all Font Awesome icons.

To use Font Awesome icons in web site please copy paste following line of code into the <head> section of your website.

Once we add above CSS file to our website we are ready to use Font Awesome icons in our site by adding  tag

Font Awesome Basic Icons

Font Awesome icons are designed to use with inline elements  or  tags. We can place Font Awesome icons in website by prefixing fa and icon’s name to  or  tag that would be like as shown below

Live Preview

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

If we observe above code we added three icons in code. Now we will run and see the output.

Output of Font Awesome Basic Icons

Following is the result of using font awesome basic icons.

Now will check how to change style of font awesome icons using css styles.

Change Font Awesome Icon Styles

As discussed earlier we can change the style of icons like increasing font size, color, etc. using CSS properties that would be like as shown below

Live Preview

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

If we observe above code we are changing size of icons and color of icons.

Output of Change Font Awesome Icons Style

Following is result of changing style of font awesome icons style.

If we change the font-size of the icon's container automatically the icon gets bigger. Same thing goes for color, shadow, and anything else that get inherited using CSS.

Change Font Awesome Icons Size

By using fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x classes we can increase size of icons relative to container. Following example shows how to use these classes to increase size of icons.

Live Preview

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

In above example we are changing size of icons using fa-2x, fa-3x, fa-4x, or fa-5x classes.

Output of Change Font Awesome Icons Size

Following is the result of changing size of font awesome icons.

Note: In case if your icons are getting chopped off on top and bottom, please make sure you have sufficient line-height.

Font Awesome Fixed width Icons

By using fa-fw class we can set fixed width to icons. This will be useful when different icon widths throw off alignment in navigation menus and group lists. Following example shows how to use fixed width class in icons.

Live Preview

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<a class="list-group-item" href="#">  Library</a>

<a class="list-group-item" href="#">  Applications</a>

<a class="list-group-item" href="#">  Settings</a>

</div>

</body>

</html>

In above code we used fa-fw class to set fixed width for icons. Now will run and see the output.

Output of Font Awesome Fixed width Icons

Following is the result of font awesome fixed width icons example.

Home Library Applications Settings

Font Awesome List Icons

By using fa-ul and fa-li classes we can easily replace default bullets in unordered list. Following example will show how to use these classes to replace default bullets in unordered list.

Live Preview

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<li>Unordered List icons</li>

<li>Unordered List icons</li>

<li>Unordered List icons</li>

</ul>

</body>

</html>

In above example we used fa-ul and fa-li classes to make icons as list.

Output of Font Awesome List Icons

Following is the result of font awesome list icons example.

Unordered List icons
Unordered List icons
Unordered List icons

Font Awesome Bordered & Pulled Icons

By using fa-border and fa-pull-right or fa-pull-left classes we can pull quotes or article icons. Following example show how to use these classes to pull quotes.

Live Preview

<!DOCTYPE html>

<html>

<head>

</head>

<body>

...Welcome to tutlane.com website it's complete technical tutorial site which we launced recently our target is to reach as many as we can... and we have confidence to become no. 1 technical site which provide complete tutorials for all software related technologies

</body>

</html>

If you observe above example we used fa-border and fa-pull-left classes to pull icons.

Output of Font Awesome Bordered & Pulled Icons

Following is the result of font awesome bordered & pulled icons example.

 ...Welcome to tutlane.com website it's complete technical tutorial site which we launced recently our target is to reach as many as we can... and we have confidence to become no. 1 technical site which provide complete tutorials for all software related technologies

Font Awesome Animated Icons

By using fa-spin class we can spin or rotate any icon and using fa-pulse class we can make any icon rotate with 8 steps. Following example shows how to use these classes to rotate icons.

Live Preview

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

In above example we used fa-spin and fa-pulse classes to apply animation effect to font awesome icons.

Output of Font Awesome Animation Icons

Following is the result of font awesome animation icons example.

Note: CSS3 animations will not support in IE8 & IE9

Font Awesome Rotated & Flipped Icons

By using fa-rotate-* and fa-flip-* classes we can rotate or flip icons arbitrarily. Following example shows how to use these classes to flip icons.

Live Preview

<!DOCTYPE html>

<html>

<head>

</head>

<body>

normal

rotate-90

rotate-180

rotate-270

flip-horizontal

flip-vertical

</body>

</html>

In above example we are rotating font awesome icons using fa-rotate-* and fa-flip-* classes.

Output of Font Awesome Rotate & Flip Icons

Following is the result of font awesome rotate and flip icons example.

 normal
  rotate-90
  rotate-180
  rotate-270
  flip-horizontal
  flip-vertical

Font Awesome Stacked Icons

To stack multiple icons, we need to use fa-stack class on the parent, the fa-stack-1x for the regularly sized icon, and fa-stack-2x for the larger icon and fa-inverse can be used as an alternative icon color. You can even throw larger icon classes on the parent to get further control of sizing.

Following example shows how to use these classes for icons.

Live Preview

<!DOCTYPE html>

<html>

<head>

</head>

<body>

fa-twitter on fa-square-o

fa-flag (inverse) on fa-circle

fa-ban on fa-camera

</body>

</html>

In above example we used classes to make font awesome icons as stacked.

Output of Font Awesome Stacked Icons

Following is the result of font awesome stacked icons example.

    fa-twitter on fa-square-o
     fa-flag (inverse) on fa-circle
     fa-ban on fa-camera

The font awesome icons will work great with bootstrap components. So we can use these icons where we required along with bootstrap components.

Font Awesome Icons Introduction