html

How to add Font Awesome Icons in HTML & CSS?

2 years ago
by Naima Aftab
Icons are a way of demonstrating an action or an object visually. These are considered highly important in a web design in order to grab user attention. Besides this, icons enhance the appearance of a website, provide easy navigation, and increase user experience.

Font Awesome Icons that are based on CSS and Less, are one of the options amongst the humongous range of icons that can be embedded in your website. Let’s explore how to add them in your web page.

How to add Font Awesome Icons?

There are two ways to add a free edition of Font Awesome Icons in your HTML web page that are:

1. Load the library

The first approach of adding a font awesome icon in your website is to add the font awesome library in the <head> section of your HTML file. For instance, in the following syntax the font awesome library of version 4.7.0 is being added in the <head> section.

<head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

Libraries of other font awesome versions are available online.

2. Get Kit Code

The second approach to add a font awesome icon in your web page is to make an account on Font Awesome official website to receive a code by the name “kit code”. This code can be used when inserting an font awesome in your web page. Once you get the kit code add the link in the src attribute of the <script> tag..

<head>

<script src="https://kit.fontawesome.com/kitcode.js" crossorigin="anonymous"> </script>

</head>

Upon receiving the kit code insert it in place of “kitcode” in the link and get going. For example.

<script src="https://kit.fontawesome.com/61ebb60581.js" crossorigin="anonymous"> </script>

Example

Suppose, you want to insert a camera icon using the kit code approach. For doing so, consider the following code snippet:

<!DOCTYPE html>

<html>

<head>

<script src="https://kit.fontawesome.com/61ebb60581.js" crossorigin="anonymous"></script>

</head>

<body style="font-size:48px;">

<i class="fas fa-camera"></i>

</body>

</html>

Note: Font Awesome Icons are added in <i> or <span> elements.

The fa prefix is used to add font awesome icons along with the icon name. The newer versions of font awesome also use prefixes like fas (for solid mode) and far (for regular mode).

Output

The font awesome camera icon successfully inserted.

The demonstration below shows the difference between the fas and far prefixes.

<!DOCTYPE html>

<html>

<head>

<script src="https://kit.fontawesome.com/61ebb60581.js" crossorigin="anonymous"></script>

</head>

<body style="font-size:48px;">

<i class="fas fa-bell"></i>

<i class="far fa-bell"></i>

</body>

</html>

Output

The font awesome bell icon (solid mode and regular mode) successfully embedded.

Now that we know how to insert a font awesome icon on the web page, let’s see how to resize font awesome icons.

Resizing Font Awesome Icons

There are a total of 13 classes that are used to alter the size of font awesome icons and these classes are; fa-xs, fa-sm, fa-lg, fa-2x, fa-3x, fa-4x, fa-5x, fa-6x, fa-7x, fa-8x, fa-9x, and fa-10x.

Example

This example demonstrates a few of the classes mentioned above.

<body>

<i class="fas fa-bell fa-xs"></i>

<i class="fas fa-bell fa-sm"></i>

<i class="fas fa-bell fa-lg"></i>

<i class="fas fa-bell fa-3x"></i>

<i class="fas fa-bell fa-6x"></i>

<i class="fas fa-bell fa-10x"></i>

</body>

Output

The font awesome bell icon with various sizes is inserted in the web page.

More About Font Awesome Icons!

Here we have listed a few things that can be done to font awesome icons to enhance user experience.

1. Animate Font Awesome Icons

You can animate font awesome icons using the below-mentioned classes.

fa-spin: It is used to rotate an icon.

fa-pulse: It is also used to rotate an icon but with 8 steps.

Example

This example demonstrates the above-mentioned classes.

<body style="font-size:36px;">

<i class="fas fa-sync-alt fa-spin"></i>

<i class="fas fa-spinner fa-pulse"></i>

</body>

Output

The sync-alt and spinner icons are animated using fa-spin and fa-pulse classes.

2. Font Awesome Listed Icons

You can replace the ordinary bullets using the classes fa-ul and fa-li.

Example

The classes mentioned above are demonstrated here.

<body style="font-size:24px;">

<ul class="fa-ul">

<li><span class="fa-li"><i class="fas fa-check-square"></i></span>Item 1</li>

<li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>Item 2</li>

<li><span class="fa-li"><i class="fas fa-square"></i></span>Item 3</li>

</ul>

Output

The font awesome listed icons are embedded in the HTML web page.

3. Rotate and Flip Font Awesome Icons

You can rotate and flip font awesome icons by utilizing fa-rotate-* and fa-flip-* classes.

Example

The example below shows how to rotate anf flip font awesome icons.

<body style="font-size: 48px;">

<i class="fas fa-car fa-rotate-90"></i>

<i class="fas fa-car fa-rotate-180"></i>

<i class="fas fa-car fa-rotate-270"></i>

<i class="fas fa-car fa-flip-horizontal"></i>

<i class="fas fa-car fa-flip-vertical"></i>

</body>

Output

The car font awesome icon is being rotated and flipped from different angles.

4. Stacking Font Awesome Icons

You can stack font awesome icons using the following classes.

fa-stack: It is used for icon considered as parent in the stack.

fa-stack-1x: It is used for icon with the regular size in the stack.

fa-stack-2x: It is used for icon with the larger size in the stack

fa-inverse: It is used to change the color of an icon in the stack.

Example

This example is a demonstration of stacked font awesome icons.

<body>

<span class="fa-stack fa-2x">

<i class="fas fa-car fa-stack-1x"></i>

<i class="fas fa-ban fa-stack-2x" style="color:red;"></i>

</span>

</body>

Output

The font awesome ban icon stacked successfully on font awesome car icon.

5. Bordered and Pulled Font Awesome Icons

You can add borders and pull font awesome icons using classes; fa-border, fa-pull-right, and fa-pull-left classes.

Example

Here the border and pulled icons classes are illustrated.

<body>

<i class="fas fa-quote-left fa-2x fa-pull-left fa-border"></i>

Icons are a way of demonstrating an action or an object visually. These are considered highly important in a web design in order to grab user attention. Besides this, icons enhance the appearance of a website, provide easy navigation, and increase user experience. Font Awesome Icons that are based on CSS and Less, are one of the options amongst the humongous range of icons that can be embedded in your website.

</body>

Output

A quote was successfully pulled to the left with a border.

Conclusion

Font awesome icons can be embedded in your website by receiving a kit code from the official Font Awesome website. There are various classes available to resize font awesome icons, moreover, you can do multiple things with these icons, such as animate font awesome icons, use them instead of ordinary bullets in a list, rotate and flip these icons, etc. This and much more about font awesome icons are discussed in this write-up with the help of suitable examples.

About the author

Naima Aftab

I am a software engineering professional with a profound interest in writing. I am pursuing technical writing as my full-time career and sharing my knowledge through my words.

View all posts