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.

Preliquisites

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

Code

.submit-button:before{
	font-family: "Font Awesome 5 Free";
	content: "\f002";!important;
	padding-right:3px; 
	font: normal normal normal 14px/1 FontAwesome;
        font-size: inherit;
	color:#333;
}

• 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.