Adding Custom Icons to Product Page Tabs

Resolved sweetonhk
(@sweetonhk)

4 years ago

How can I add custom icons in front of the title of product page accordion tabs?

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

Viewing 4 replies - 1 through 4 (of 4 total)

3 Sons Development
(@3sonsdevelopment)

4 years ago

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
Thread Starter sweetonhk
(@sweetonhk)

4 years ago
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 4 years ago by sweetonhk.
Plugin Support Paulo P – a11n
(@paulostp)

4 years ago

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.

Plugin Support Paulo P – a11n
(@paulostp)

4 years ago

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.