Use Font Awesome Icon as Content in CSS

In this blog, you will learn how to use font awesome icon as content in pseudo-element property of CSS. Pseudo element is a very useful property of CSS, sometimes there is a need to add icons before elements then we use this property. Let’s see the following steps how to use font awesome icon as content:

Step1: The first step is to include CSS file of font-awesome in <head> section:

 <link rel="stylesheet" href="

Search icon whatever you want to use and copy the Unicode of this icon, you can see in this image:

Paste Unicode in your CSS code like this:


Complete Source Code:

<!DOCTYPE html> 
 <link rel="stylesheet" href="
libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style>   li {     list-style:none; }   li::before {   content:'\f00c';   font-family:FontAwesome; }   </style> </head>   <body> <ul> <li>Web Design</li> <li>Web Development</li> <li>Graphic Design</li> </ul> </body> </html>

Categories: web designing css

Trending Courses


Regular : 45 Days

Fastrack : 20 Days

Crash : 10 Days

Advance Digital Marketing Expert Course

Regular : 6 Months

Fastrack : 3 Months

Crash : 2 Months

React JS

Regular : 45 Days

Fastrack : 25 Days

Crash : 15 Days


Regular : 45 Days

Fastrack : 20 Days

Crash : 10 Days

Front End Developer

Regular : 6 Months

Fastrack : 4 Months

Crash : 2 Months

Web Expert with Python

Regular : 12 Months

Fastrack : 6 Months

Crash : 3 Months

Related Blogs

Request For Demo