Using Icon Fonts

Use of icons ↑ Back to top

In some themes, we use font icons. 


In most cases we use the Font Awesome because of the wide variety of icons and SIL Open Font License.

Customizing icons ↑ Back to top

You are using an icon font! How do I change this icon for the one I want to use?

To customize icons:

1. Visit the Font Awesome website and find an icon you like.

2. Use a browser inspector (like Chrome Dev Tools) to find the unique code of that icon.



Some browsers (at least Firefox as in the example) will render the icon code as ASCII code:


In this case, you might want to use a converter (here is one) to get the regular hexadecimal code:


3. Once you have the code, go ahead, open your website and inspect the code of the icon that you want to change. You need to copy the CSS selector that is responsible for displaying this particular icon:


In this example, the CSS code is: li.fax:before {
content: "f02f";

4. Open your custom.css file, paste the CSS there, and replace the hexadecimal code of the icon with the one copied from the FontAwesome website:


In this example the final code in your custom.css would look like this: li.fax:before {
content: "f087";

Note: This is a Developer level doc. If you are unfamiliar with CSS and resolving potential conflicts, select a WooExpert or Developer for assistance. We are unable to provide support for customizations under our  Support Policy.

WooCommerce - the most customizable eCommerce platform for building your online business.

Back to the top