Adding font-awesome to an element using CSS

Use cases

  • Customizing a WordPress theme without editing core theme files
  • Customizing a web page using Chrome extensions

If you are working on hosted site without the ability to edit core files, the author might provide a way to inject custom CSS, JavaScript or HTML.

Here is a way you can add Font-Awesome icon in to an element. You can use the same concept for other icons.



  • Add font-awesome CSS globally to the site. If you are on WordPress, chances are you already have font-awesome


	font-family: "Font Awesome 5 Free";
	content: "\f002";!important;
	font: normal normal normal 14px/1 FontAwesome;
        font-size: inherit;
  • font-family – change this to the font family of your icons. In this case, we are using Font Awesome 5 Free
  • content – Visit the font-awesome site and find your icon. Right-click on the icon and inspect page. Devtools will open up on the i element. Expand it and click the :before property to open the styles window on the right. Copy the content value.