How to Use Font Awesome Icon as Content in CSS

Today, icon fonts are quite common, and more and more developers are taking advantage of them in their designs. Icon fonts are simple fonts that contain symbols and glyphs instead of letters or numbers. They can be styled with CSS in the same way as ordinary text.

In this snippet, we’ll show how font awesome icon can be used as content.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Create HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <a href="#">Here is a link</a>
  </body>
</html>

Add CSS

body {
  font-family: Arial;
  font-size: 15px;
}

a {
  text-decoration: none;
  color: #000000;
}

a:before {
  font-family: "Font Awesome 5 Free";
  content: "\f00c";
  display: inline-block;
  padding-right: 3px;
  vertical-align: middle;
  font-weight: 900;
}

Here is the result of our code.

Example of adding font awesome icon as a content:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <link rel="stylesheet" type="text/css" href="//use.fontawesome.com/releases/v5.7.2/css/all.css">
    <style>
      body {
        font-family: Arial;
        font-size: 15px;
      }
      a {
        text-decoration: none;
        color: #000000;
      }
      a:before {
        font-family: "Font Awesome 5 Free";
        content: "\f00c";
        display: inline-block;
        padding-right: 3px;
        vertical-align: middle;
        font-weight: 900;
      }
    </style>
  </head>
  <body>
    <a href="#">Here is a link</a>
  </body>
</html>

In the example above, we replaced the content value with the corresponding unicode number. Note that there are common CSS properties that apply to all icons.

Let’s see one more example, where we used two icons inside a <li> tag.

Example of adding font awesome icons as a content in an unordered list:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <link rel="stylesheet" type="text/css" href="//use.fontawesome.com/releases/v5.7.2/css/all.css">
    <style>
      ul li {
        list-style-type: none;
        display: inline-block;
        margin-right: 20px;
      }
      .icon::before {
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
      }
      .facebook::before {
        font-family: "Font Awesome 5 Brands";
        font-weight: 900;
        content: "\f082";
      }
      .twitter::before {
        font-family: "Font Awesome 5 Brands";
        content: "\f099";
      }
    </style>
  </head>
  <body>
    <ul>
      <li>
        <span class="icon facebook"></span> Facebook
      </li>
      <li>
        <span class="icon twitter"></span> Twitter
      </li>
    </ul>
  </body>
</html>
Change the font-family to Font Awesome 5 Free or Font Awesome 5 Brands depending on the type of icon you want to render.