WooCommerce Custom My Account Navigation Tab Icons

WooCommerce My Account navigation tabs with custom icons


There are no pre-requisites in order for you to be able to implement this solution.

How To Implement This Solution?

Identify the li class link name and replace the necessary class in the code. Then, add the custom CSS to the My Account page.

About this Solution

You may wish to replace the default My Account Navigation Link icons with icons which are more appropriate and inline with your business branding. In our example, we have replaced the dashboard icon ( ) with a lightbulb icon ( ). To replace the icons, follow the steps in this quick guide.

Get the Unicode for the Icon you want

Head to Font Awesome and grab the unicode for the icon

Font Awesome unicode

Choose the Link You Wish To Change

Here is a list of the default my account navigational link li class names. Pick one to target

					woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--dashboard         // Dashboard
woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--orders           // Orders
woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--downloads	    // Downloads
woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--edit-address     // Addresses
woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--edit-account    // Account Details
woocommerce-MyAccount-navigation-link woocommerce-MyAccount-navigation-link--customer-logout	// Logout

Add this CSS to your my account page

body.woocommerce-account ul li.woocommerce-MyAccount-navigation-link--dashboard /* <- This is the Dashboard link */ a:before{
	content: "\f0eb" /* <- This is the lightbulb icon. Include the backslash prefix */

Snippet Benefits

  • Improve the User Experience (UX) of your store by tailoring specific navigation links to be inline with your branding.
  • Show the customer you’ve gone to the effort of removing default icons and replace them with icons more appropriate to your business.
WooCommerce Conversion Rate Optimisation (CRO) eBook
100 WooCommerce Conversion Rate Optimisation Tips

Leave a Reply

If you are going to write code in the comments, please wrap it between code tags.

Your email address will not be published. Required fields are marked *

Other Recent Guides

Subscribe To Emails

Get exclusive WooCommerce tips that I only share with email subscribers

Join hundreds of other subscribers