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>
Categories: web designing css
Written By : Web Development Institute
Trending Courses

CodeIgniter

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

Laravel

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