My Account

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.

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

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.