Use Font Awesome Icon as CSS Content

Use Font Awesome icon as CSS content

Update for FontAwesome 5
^{Thanks to Aurelien}

You need to change the font-family to Font Awesome 5 Brands OR Font Awesome 5 Free, based on the type of icon you are trying to render. Also, do not forget to declare font-weight: 900;

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

Demo

You can read the rest of the answer below to understand how it works and to know some workarounds for spacing between icon and the text.

FontAwesome 4 and below

That's the wrong way to use it. Open the font awesome style sheet, go to the class of the font you want to use say fa-phone, copy the content property under that class with the entity, and use it like:

a:before {
    font-family: FontAwesome;
    content: "\f095";
}

Demo

Just make sure that if you are looking to target a specific a tag, then consider using a class instead to make it more specific like:

a.class_name:before {
    font-family: FontAwesome;
    content: "\f095";
}

Using the way above will stick the icon with the remaining text of yours, so if you want to have a bit of space between the two of them, make it display: inline-block; and use some padding-right:

a:before {
    font-family: FontAwesome;
    content: "\f095";
    display: inline-block;
    padding-right: 3px;
    vertical-align: middle;
}

Extending this answer further, since many might be having a requirement to change an icon on hover, so for that, we can write a separate selector and rules for :hover action:

a:hover:before {
    content: "\f099"; /* Code of the icon you want to change on hover */
}

Demo

Now in the above example, icon nudges because of the different size and you surely don't want that, so you can set a fixed width on the base declaration like

a:before {
    /* Other properties here, look in the above code snippets */
    width: 12px; /* add some desired width here to prevent nudge */
}

Demo

Font Awesome Icons not showing with css Content property

FontAwesome displays different icons depending on the font-weight property, and the \f04a and \f04e icons are not available on the default font-weight of 400 in the free version. However, you can still use the icons using a font-weight of 600. Example:

.button {
  font-family: "Font Awesome 5 Free";
  width: 30px;
  display: inline-block;
  font-size: 28px;
  color: black;
  border: solid black;
  cursor: pointer;
}
.controls.main .play-pause::before {
  content: "\f144";
}

.controls.main .prev::before {
  content: "\f04a";
  font-weight: 600;
}

.controls.main .next::before {
  content: "\f04e";
  font-weight: 600;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet"/>
 <div class="controls main">
      <span class="button prev"></span>
      <span class="button play-pause"></span>
      <span class="button next"></span>
 </div>

Font Awesome 5, why is CSS content not showing?

^{If you are using the JS+SVG version Read this: Font Awesome 5 shows empty square when using the JS+SVG version}

First, you only need to include the CSS file of Font Awesome 5 either in the head tag using:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">

Or within the CSS file:

@import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css")

Then you need to correct the font-family and the content like below:

@import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css");
.fp-prev:before {    color:#000;    content: '\f35a'; /* You should use \ and not /*/    font-family: "Font Awesome 5 Free"; /* This is the correct font-family*/    font-style: normal;    font-weight: normal;    font-size:40px;}

<i class="fp-prev"></i>

load font-awesome icon in ::before and ::after pseudo element

Adding the font-awesome stylesheet to your code and it will load the icon.

.x::before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
}

.x::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f007";
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"></link>
<p class="x">hello, my name is john</p>

how to add the font awesome icon in after before elements

Add to to your before pseudo selector

   content: "\f2ba";
   font: normal normal normal 14px/1 FontAwesome;

To get the value of content, go to their website,

Right-click -> Inspect any icon (<i> ::before </i> tag) and then check the value of the content in the before pseudo selector.

Dont forget to put the value of font

normal normal normal 14px/1 FontAwesome;

This is very important.

<html>
<head>  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
</head><style>  .thish {    position: relative;    height: 150px;    width: 150px;    background: red;  }    .thish::before {    position: absolute;   content: "\f2ba";   font: normal normal normal 14px/1 FontAwesome;    right: 40%;    color: #000;    bottom: 0;    height: 30px;    width: 60px;    background: green;    z-index: 1;  }</style>
<body>
  <div class="thish">  </div>

</body>
</html>

CSS Content with a Font Awesome light icon

You probably use the classes fas and fa-arrow-right. Instead of fas use fal. But that's only for Font Awesome 5 Pro.

Edit:

Use font-family: "Font Awesome 5 Light", which is also available for Font Awesome 5 Pro.

How can we use Font Awesome Icon in CSS? I want to display an icon after heading

You can replace Font Awesome 5 Free by Font Awesome 5 Pro

Your code look like that :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
        integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />

    <title>Test</title>

    <style>
        * {
            margin: 0;
            padding: 0%;
            box-sizing: border-box;
        }

        .main-div {
            width: 100vw;
            height: 100vh;
            padding-top: 100px;
            text-align: center;
        }

        h1 {
            color: #2980b9;
            font-size: 5rem;
        }

        h1::after {
            font-family: "Font Awesome 5 Pro";
            font-weight: 900;
            content: "\f007";
            width: 20vh;
            height: 25px;
            color: #1abc9c;
            font-size: 3rem;
            display: inline-block;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <section class="main-div">
        <h1>Test</h1>
    </section>
</body>

</html>

Is it possible to set fontawesome icon to an element from css when using angular-fontawesome?

No, it is not possible to do that.

There are two flavors of the FontAwesome "Webfonts + CSS" and "SVG + JS". You can read more about the pros and cons of each approach in the official documentation.

The angular-fontawesome library is built using the latter approach - "SVG + JS" and therefore there is no icon font or CSS that you can use to display an icon character using CSS only.

So either you can:

change your code to use the fa-icon component instead of a CSS rule
use fontawesome-svg-core to render the icon as an SVG string and append it dynamically using JS - see guide

Use Font Awesome Icon as CSS Content