WooCommerce Custom My Account Navigation Tab Icons

Pre-Requisites

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.

Need support with the snippet? We’re Here to Help You, Contact Us!

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 ( tachometer alt solid 1 ) with a lightbulb icon ( lightbulb solid ). 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.