Adding Custom Icons to Product Page Tabs

Hi @sweetonhk,

One way to do that is by using the :before pseudo-element in CSS. You can add a “content” property to it that uses the URL to your image icon.

This CSS Tricks article can show you how this works.

https://css-tricks.com/almanac/properties/c/content/

Take care

Hi @3sonsdevelopment !

Thanks so much for your prompt reply. I have read the article but really sorry that I don’t really understand how to edit the CSS code as honestly I don’t have a tech background.

Do you mind showing me an example on how to add an icon in front of the product page accordion tabs?

Thanks SOOOO much for your help! @3sonsdevelopment

Here is the location that I would like to add:
https://ibb.co/G90mz7s
The page I need help with: https://sweeton.hk/product/color-by-the-yard-emerald-pendant-%e8%a4%87%e8%a3%bd/

• This reply was modified 2 years, 11 months ago by sweetonhk.

Hello,

Please check the links below for additional examples of adding images before links:

https://stackoverflow.com/questions/29576527/adding-icon-image-to-css-class-for-html-elements
https://stackoverflow.com/questions/45524714/using-before-and-after-pseudo-elements-with-images

I see you’re using the Custom Product Tabs plugin for the product tabs. I would recommend you reach out to them, as they may have other suggestions for doing what you want with their plugin, but I see you’ve already done that.

Let us know how it goes.

Hello @sweetonhk,

This topic has been inactive for a while, so I’m marking it as resolved.

Please open a new topic if you need additional assistance.