How To Use Font Awesome Icons In CSS

Font Awesome is a widely used open-source icon library consisting of more than 1600 vector icons. These icons can be resized and styled without any loss in quality, making them particularly useful for web design. In this tutorial, we will demonstrate how to use Font Awesome icons in CSS on a WordPress site.

Step 1: Adding Font Awesome to your Website

The first step is to include the Font Awesome library on your website. There are two ways to do this – by using a Content Delivery Network (CDN) or by downloading the files and hosting them locally.

To include the Font Awesome CDN, add the following line to the head section of your HTML:

1
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha384-KyZXEAg3QhqLMpG8r+Knujsl7/1P2UivPdSfo601zOPriW8k6idz7eHTxEFzkLg" crossorigin="anonymous">

For hosting the library locally, head to the Font Awesome website, download the files and then link them through your HTML.

Step 2: Using Font Awesome Icons in HTML

To insert an icon in your HTML, you need to use the appropriate Font Awesome class. The class names are based on the icon name, and they follow the “fa” or “fas” prefix, depending on the version being used.

For example, the class for the “user” icon is “fas fa-user”. To add this icon in your HTML, simply create an <i> or <span> element and assign the respective class as follows:

1
<i class="fas fa-user"></i>

The icon will be displayed wherever the element is placed.

Step 3: Styling Icons with CSS

Now that you’ve added Font Awesome icons to your HTML, you can style them using CSS. The following examples will demonstrate how to change the size, color, and other properties of the icons.

  1. To change the color, simply use the “color” property:
1
2
3
.fas.fa-user {
  color: red;
}
  1. To resize the icon, use the “font-size” property:
1
2
3
.fas.fa-user {
  font-size: 48px;
}
  1. Add a hover effect to the icon:
1
2
3
4
.fas.fa-user:hover {
  color: blue;
  cursor: pointer;
}

You can also use the various CSS properties to adjust the positioning, add animations, and apply other stylings to the icons.

Step 4: Using Font Awesome Icons in CSS

In certain cases, you might want to use Font Awesome icons directly in your CSS instead of your HTML. To do this, you’ll need to use the “content” and “font-family” properties and the Unicode value of the icon.

For example, to add the “user” icon as a list item bullet, you would use the following CSS:

1
2
3
4
5
6
ul.fa-ul li::before {
  content: "\f007";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  padding-right: 10px;
}

You can find the Unicode values for Font Awesome icons in the Icon Gallery on their website.

Full Code Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Font Awesome Example</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha384-KyZXEAg3QhqLMpG8r+Knujsl7/1P2UivPdSfo601zOPriW8k6idz7eHTxEFzkLg" crossorigin="anonymous">
  <style>
    .fas.fa-user {
      color: red;
      font-size: 48px;
    }
 
    .fas.fa-user:hover {
      color: blue;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <i class="fas fa-user">aabbcc</i>
</body>
</html>
 

Output

Display:

Hover:

Conclusion

This tutorial demonstrated how to use Font Awesome icons in your CSS for a WordPress site. By following these simple steps, you can easily incorporate and style these versatile icons for a more visually appealing website. Remember, always refer to the Font Awesome website for the latest version and class names to ensure you’re using the most up-to-date icons.