How to Create Font Awesome Icons with CSS

| Coding Tutorials
How to Create Font Awesome Icons with CSS

Icons on a website are handy. They provide easy visual information, providing links to email forms, telephone numbers, maps and more.

Traditionally these icons have been graphics created using a graphic design programme such as Illustrator or Photoshop or downloaded from the many free graphics sites.

In this tutorial, you will learn how to create icons using just CSS and fonts. This will allow you to edit all your graphics with just a few lines of code. By using font-based graphics you also make your pages lighter and more responsive.

The most popular font for creating CSS-based icons is Font Awesome. This font and icon toolkit was created by Dave Gandy, originally for Twitter Bootstrap, and is available free under SIL Open Font License 1.1, Creative Commons Attribution 4.0, and MIT License.

The Font Awesome website can be found at

Getting started

The first step is to link to the font from your website. You can do this by adding the following line of code anywhere within the tags on your HTML page or template:

<link href="" rel="stylesheet">

This links directly to the font on the Font Awesome site.

An alternative is to download the font files, upload them to your website and then link to those files.

You can download the files in zip format from the home page of Font Awesome:

Unzip the files and upload them to a folder on your website.

You then link to them from the head section of your page or template, like this:

<!--your css files-->
<link href="/mywebsitefolder/fontawesome/fontawesome-all.css" rel="stylesheet">

What icons are available?

Take a look at the extensive Font Awesome gallery to discover what icons are available.

Here are just a few of them:

Some of the Font Awesome icons

This gallery is searchable so you can easily find suitable icons.

If, for instance, you decide you want to use the home icon, click on the icon itself.


You will then see a variety of uses and an easy-to-use line of code to add to your webpage.

Your code will look something like this:

<link href="" rel="stylesheet">
<i class="fas fa-home"></i>

And your webpage will look like this:

And your webpage will look this this

Getting stylish

Like any font, you can use CSS to control the way your icon looks.

You can change the color and size by adding just two lines to your CSS file.

.fa-home {
color: red;
font-size: 40px;

And now the icon looks like this:

And now the icon looks like this

If you want it to have a background so that it looks more like a button, you can add that with CSS too.

.fa-home {
color: red;
font-size: 80px;
background: #000;
padding: 15px;

Now it looks like this:

Now it looks like this

If you want the button to be round, then you can add a radius to the background, like this:

.fa-home {
color: red;
font-size: 30px;
background: #000;
padding: 15px;
border-radius: 30px;

And now it looks like this:

And now it looks like this

You can experiment with the code until you have a button that suits the look of your website.


To animate the icons you can simply add fa-spin to your code and your icon will start to spin.

Add this code:
<i class="fas fa-home fa-spin"><i>

And the graphic will then start to spin.

Similarly, you can rotate icons by adding a snippet like this:

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

After you apply this CSS snippet to the icon, it will look like this:

After you applied this CSS snippet to the icon, it will look like this

Other icon fonts

Font Awesome is not the only icon font that you can use in this way. Google’s Material Design offers over 900 icons as a web font.

Take a look at the gallery of their communication icons:

Take a look at their gallery of their communication icons

To add the font to your website you would add a link to the section and then select the icon you wish to use.

The following code:

<html> <title></title> <link rel="stylesheet" href=""> <body> <i class="material-icons">home</i> <i class="material-icons">search</i> <i class="material-icons">face</i> </body> </html>

It will create the following icons:

Will look like this

These icons can be adjusted using CSS.


There is a wide variety of icons available for almost any purpose. Icon fonts make it easy to add graphics to your website in a way that is light and responsive.

The size and color can be changed easily when you restyle your website without having to go back to graphics files.

Additional Reading

What's Next?

CSS stands for Cascading Style Sheets and is the part of your codes that control the layout, look and feel of your website. 

Join our Video Club and start learning how to use the power of CSS to design great-looking websites.

About the author

Born in Zambia but living now in Cape Town, South Africa, Libby Young started out as a journalist. She taught herself HTML when the company where she was an sub-editor made the transition from CD-Rom to the web 20 years ago. Since then she has developed content-rich websites using a variety of open source content management systems.