Use Font Awesome Icon as Content in CSS

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="https://cdnjs.cloudflare.com/
ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


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



Step3: Paste Unicode in your CSS code like this:


 li::before 
 { 
    content:'\f00c'; 
    font-family:FontAwesome; 
 } 
  


Complete Source Code:

<!DOCTYPE html> 
 <html> 
 <head> 
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/
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>