There’s an easier way to change your WooCommerce my-account page menu icons, without overriding the my-account.php template!
1. Go ahead and install the Better font awesome plugin. It’s free!
2. Add the following CSS code to your “Additional CSS” found in your customizer view
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--dashboard a:before {
font-family: "fontAwesome";
content: "\f00c";
}
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--orders a:before {
font-family: "fontAwesome";
content: "\f00c";
}
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--downloads a:before {
font-family: "fontAwesome";
content: "\f00c";
}
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--edit-address a:before {
font-family: "fontAwesome";
content: "\f00c";
}
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--edit-account a:before{
font-family: "fontAwesome";
content: "\f00c";
}
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a:before {
font-family: "fontAwesome";
content: "\f00c";
}
3. Replaces all instances of \f00c unicode with your own preferred Unicode — you can use https://fontawesome.com/cheatsheet to find icons (and their Unicodes)
That’s all!
Please keep in mind that this was written specifically for changing my account page menu icons in the Storefront theme
Was this helpful? Please buy me a coffee
Hi, is there a way that the icon and text color can be changed without overriding anything?
With this CSS method, you don’t need to override any template files! If you’d like to change the text color, then you can just append something like:
.woocommerce-MyAccount-navigation ul li a { color: #96588a; }.. to the initial CSS code, and replace
with your preferred text color
I’m not aware of any plugin/s that would help with this, unfortunately.