LESSON 10.2

Font Awesome Icons

Add thousands of scalable icons to any page

Learn how to install Font Awesome 4, add icons to your HTML using the fa class syntax, and style them with CSS selectors.

💡 The Concept

Font Awesome icons are scalable vector icons you can add to any webpage and style with CSS exactly like text. Font Awesome is a CSS framework that gives you access to thousands of scalable icons. Because they are vectors, not images, they look sharp at any size and can be styled with CSS just like text. Font Awesome icons look like this, and are sometime paired with text.

Font Awesome Versions

Font Awesome comes in several versions. This lesson uses Font Awesome 4 on purpose. It is completely free, needs no account, and its icon gallery has no paid options to click by accident, so you can focus on learning without any risk of signing up for something or paying. Newer versions, like Font Awesome 6, offer many more icons, and we show how to move up to them safely later in this lesson.

Installing Font Awesome

Add one <link> tag to your <head>, above your own stylesheet. Because Font Awesome is a CSS framework, it must load before your stylesheet so your styles can override it.

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

In context, it looks like this:

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>My Website</title>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   <link rel="stylesheet" type="text/css" href="style.css">
</head>

Adding an Icon

Each icon uses an <i> tag with two classes: fa (required on every icon) and the specific icon name. Browse all available icons at fontawesome.com/v4.7.0/icons.

<i class="fa fa-user-circle-o" aria-hidden="true"></i>
Font Awesome user icons displayed in a row at various sizes
The fa-user-circle-o icon scaled to different sizes.

Making an Icon a Link

A common use is wrapping an icon in an anchor tag, for example linking to social media profiles:

<a href="https://yourwebsite.com">
   <i class="fa fa-user-circle-o" aria-hidden="true"></i>
</a>

Styling Icons with CSS

Target icons with CSS using one of three approaches depending on what you want to change:

Scenario 1: Style all icons on your page. Use i.fa as the selector.

i.fa {
   font-size: 3em;
   color: purple;
}
i.fa:hover {
   color: blue;
}

Scenario 2: Style one specific icon. Use the icon class name as the selector, such as .fa-user-circle-o.

Scenario 3: Style icons only inside a specific section. Use a descendant selector such as footer .fa.

Want More Icons? Font Awesome 6 (Optional)

This lesson uses Font Awesome 4 because it is simple and completely free. When you want a much larger selection, you can move up to Font Awesome 6, which adds thousands more icons. It is also free, with no account needed. Add this one <link> to your <head>, above your own stylesheet, just like the version 4 link:

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

That one CSS file includes every free icon, with nothing to download and nothing to buy. The syntax is a little different from version 4: you add a style prefix such as fa-solid or fa-brands instead of plain fa.

<i class="fa-solid fa-user"></i>      <!-- solid icon -->
<i class="fa-brands fa-github"></i>   <!-- brand or logo -->

Browse only the free icons at fontawesome.com/search?m=free, and keep the Free filter on.

⚠️ Do not buy anything for this class. Everything you need is free. The Font Awesome website will try to sell you a Pro plan, a Kit, or a free trial, but you do not need any of those, and you should never enter a credit card. If a page asks you to pay or sign up, close it and use the free CDN link and the free icons instead.

Exercise: Try It Yourself

You can do this whole exercise in JSFiddle. The one trick: JSFiddle does not give you a <head> to edit, so you paste the Font Awesome link at the top of the HTML panel, and the browser still loads it.

Step 1. Open JSFiddle.

Step 2. At the top of the HTML panel, paste the Font Awesome link:

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

Step 3. This time, find the icon yourself. Go to fontawesome.com/v4.7.0/icons and search for linkedin. Click the icon you want, then copy its <i> tag into your HTML, just below the Font Awesome link.

Step 4. Icons are often used as links. Wrap your LinkedIn icon in an anchor tag that points to a LinkedIn page, placing the <i> tag inside the link:

<a href="https://www.linkedin.com/" target="_blank">
   <!-- your LinkedIn icon goes here -->
</a>

Step 5. In the CSS panel, select i.fa, set the font size to 5em, and try adding a color and a :hover rule. For example:

i.fa {
   font-size: 5em;
   color: purple;
}
i.fa:hover {
   color: blue;
}

When you are done, your styled LinkedIn icon link should look something like this:

JSFiddle showing a LinkedIn icon wrapped in a link and styled large and purple with Font Awesome

💡 If you are making a website template: Add Font Awesome to your website template so icon fonts are available across all your pages. See the full website template guide for reference.

❓ Frequently Asked Questions

I added an icon but nothing shows up. What went wrong?

The most common cause is a missing Font Awesome link. An icon tag by itself does nothing. The icon only appears when the Font Awesome stylesheet is loaded on the page, because that stylesheet is what turns class names like fa-user-circle-o into real icons. Make sure the Font Awesome link is in your head, or in JSFiddle at the top of the HTML panel, and that it loads before your icons. It is also worth checking the icon class name for typos, since a misspelled name will not match any icon.

Why do Font Awesome icons use an empty i tag?

By convention, each Font Awesome icon goes inside an empty i tag. The letter i once stood for italic, but here it just serves as a small, inline container for the icon. You could use a span instead and it would still work, but the i tag is what the Font Awesome documentation uses, so it is the convention you will see everywhere.

What does the aria-hidden attribute do on an icon?

It tells screen readers to skip the icon. Decorative icons carry no real text, so announcing them would just add noise for someone using a screen reader, and aria-hidden hides them from that. If an icon carries meaning on its own, such as a standalone icon link with no text beside it, you should instead give it a label so assistive technology can describe it.

Do I have to pay for Font Awesome?

No. Font Awesome has a large free icon set that covers most needs, and everything in this lesson uses the free version. The company also sells a Pro plan with extra icons and styles, but you never need it for this class. If a page asks you to start a trial, create a Kit, or enter payment details, you can close it and keep using the free icons.

★ Key Takeaways

Font Awesome is a free icon library that lets you add clean, scalable icons to any web page. This lesson showed you how to link the library and add icons using simple HTML classes. Next, you will get started with Bootstrap, a powerful front-end framework used by developers all over the world. Bootstrap and Font Awesome are often used together on the same project.

Next Lesson: Getting Started with Bootstrap

← Back to Bootstrap and Frameworks Lessons

← Back to All Lessons

Google Ads

The costs of this website are partially offset by revenue from Google Ads.

Tools of the Trade

HTML/CSS Lessons