WooCommerce My Account Icons

  • Hi. Trying to change the icons associated with some custom My Account tabs that I’ve added. Found CSS that is supposed to do the trick, but it isn’t working for me which I guess is because of where/how the font awesome icons are stored.

    Right now, any new/custom My Account tabs adopt a generic file icon by default. I tried to change this to a different font awesome icon using the following CSS snippet…

    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 */
    }

    It doesn’t find the icon (doesn’t display anything) which I’m assuming is due to where/how the Ocean WP stores the font awesome icons? Tried to figure this out using Developer Tools but it doesn’t show me where the content for the default icons in My Account are pulling from.

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)

  • Hello @jmccrone,

    Thank you for reaching out,

    The content code seems to be a Font Awesome icon, so ensure that your desired Font Face is added correctly. To do this you need to add “font-family” for your custom CSS.
    https://docs.fontawesome.com/v5/web/advanced/css-pseudo-elements

    Also, ensure that you use the correct version of FA for your icons.
    To enable FA in OceanWP, please navigate to WP Dashboard > Appearance > Customizer > General Options > Performance and ensure the FA is enabled.

    If the above solution doesn’t help you, for troubleshooting check the following items:
    1. Ensure your CSS code references the correct font class from that version.
    2. Look for conflicting styles or selectors that might be overriding your custom CSS.

    I hope it helps.
    Best Regards

Viewing 1 replies (of 1 total)
  • You must be logged in to reply to this topic.