How To Add Font Awesome Icon Using Before And After Css

In This article I am going to show you how to add Font Awesome Icon using CSS.

First of all you need to check that Font awesome icons are included within your website or not.

If you haven’t already included in your site then you can add this link in your code file.

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/fontawesome.min.css

 In your HTML code you need to mention a class or reference element where you need to add an Icon.

<a href="#" class="icon">Person</a>

Now for this a tag you need to add icon in before.

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

.icon:after { 
  content: "\f0e0"; 
  font-family: "Font Awesome 5 Free"; 
  font-weight: 900; 
}

Hope you find something helpful.

Thanks