How to Create Font Awesome Icons with CSS

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.

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 https://fontawesome.com/

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="https://use.fontawesome.com/releases/v5.0.7/css/all.css" 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:
https://fontawesome.com/

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:

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

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.

02

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:

<html>
<xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="https://use.fontawesome.com/releases/v5.0.7/css/all.css" rel="stylesheet">
</head>
<body>
<i class="fas fa-home"></i>
</body>
</html>

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.

Animation

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="https://fonts.googleapis.com/icon?family=Material+Icons"> <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.

Conclusion

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.

Author

0 0 votes
Article Rating
Subscribe
Notify of
guest

5 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
mori
6 years ago

Please keep in mind, that the default Font Awesome Icons have a lack regarding accessibility (a11y), the way Google Material works is the better and recommended way with ligatures. Nevertheless depending on the FA version there are ways to improve A11y:
– FA v5: https://fontawesome.com/how-to-use/accessibility#webfont-accessibility
– FA v4.7: https://fontawesome.com/v4.7.0/accessibility/

mandy
mandy
5 years ago

please tell me that how to add icon in website….i did’nt understand anything….i trying to use these code many time,but nothing happened….please help me.

Furqan
Furqan
5 years ago

how to make changes like I want remove the chimini of above home icon

Ma Thin Thin Khaing
Ma Thin Thin Khaing
4 years ago

how do you do to create font awesome account

Lakshmi V
Lakshmi V
3 years ago

Thank you

5
0
Would love your thoughts, please comment.x
()
x