Place icons on my account panel

Hello ! What CSS should I use to place the icons in my account panel as indicated in the image? And where would the source be to be able to choose them? Thank you

Attachments:

You must be logged in to view attached files.

Hello,

You need to choose the icons in https://www.flaticon.com/

Then upload them in Media library and give their URLs I will provide CSS

Best Regards

Hello,

If I guess correctly this is the notification that this is a demo store, in this case it is removed in Appearance > Customize > Woocommerce > Shop notice.

Best Regards

And there are no free icons or that I should not attribute to any author? I’ll wait for you to provide me the CSS. Thank you

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard{
	background-image:url(https://woodmartcdn-cec2.kxcdn.com/wp-content/uploads/2016/07/blog-11-75x65.jpg);
	background-size:contain;
	background-position:top right;
  background-repeat:no-repeat;
}
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--orders{
	background-image:url(https://woodmartcdn-cec2.kxcdn.com/wp-content/uploads/2016/07/blog-11-75x65.jpg);
	background-size:contain;
	background-position:top right;
  background-repeat:no-repeat;
}
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--downloads{
	background-image:url(https://woodmartcdn-cec2.kxcdn.com/wp-content/uploads/2016/07/blog-11-75x65.jpg);
	background-size:contain;
	background-position:top right;
  background-repeat:no-repeat;
}
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--edit-address{
	background-image:url(https://woodmartcdn-cec2.kxcdn.com/wp-content/uploads/2016/07/blog-11-75x65.jpg);
	background-size:contain;
	background-position:top right;
  background-repeat:no-repeat;
}
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--edit-account{
	background-image:url(https://woodmartcdn-cec2.kxcdn.com/wp-content/uploads/2016/07/blog-11-75x65.jpg);
	background-size:contain;
	background-position:top right;
  background-repeat:no-repeat;
}
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--wishlist{
	background-image:url(https://woodmartcdn-cec2.kxcdn.com/wp-content/uploads/2016/07/blog-11-75x65.jpg);
	background-size:contain;
	background-position:top right;
  background-repeat:no-repeat;
}
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout{
	background-image:url(https://woodmartcdn-cec2.kxcdn.com/wp-content/uploads/2016/07/blog-11-75x65.jpg);
	background-size:contain;
	background-position:top right;
  background-repeat:no-repeat;
}

As soon as you upload icons into Media library, replace image URLs in each item.

Best Regards

Perfect! And as I would do to leave a small separation or line spacing, it is that they are a little on top. And what would be the CSS to load the images of the active links. Thanks again

Hello,

Do you want a gap or line? Please clarify your purpose.

Best Regards

I need them to have a space or gap between them. I hope I was a little clearer. Thanks

Hello,

Add this code as well:

.woocommerce-MyAccount-navigation li{
margin:5px 0;
}

Now on hover image would disappear, in order to keep an image on hover as well, add this code:

.woocommerce-MyAccount-navigation ul li a:hover {
    background-color: transparent;
}

Best Regards

[Author]

Posts