How to use Font Awesome icon as CSS content?

Spread the love

Sometimes, we want to use Font Awesome icon as CSS content.

In this article, we’ll look at how to use Font Awesome icon as CSS content.

How to use Font Awesome icon as CSS content?

To use Font Awesome icon as CSS content, we set the content property.

For instance, we write

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

to set the content property to the code for the icon we want to show.

We use font-family: "Font Awesome 5 Free"; to set the font-family to the Font Awesome font.

Conclusion

To use Font Awesome icon as CSS content, we set the content property.

Leave a Reply

Your email address will not be published. Required fields are marked *