My Account

WooCommerce Custom My Account Navigation Tab Icons

WooCommerce My Account navigation tabs with custom 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 ( 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.

100 WooCommerce Conversion Rate Optimisation Tips

This field is for validation purposes and should be left unchanged.

Let’s collaborate!

Need to outsource WordPress development?

Join forces with UnlimitedWP for an outsourced white label web development service you can truly rely on.

First Timer Here?

Sign up to receive 10% off on your first month with us.

26027
WELCOME OFFER