How to use my own icon in featured item setting?

[marie-soleil]

Hi,

I would like to use my own icon in the feature item (see image attached).

Is there a way to do this? It seems I only have acces to a pre-selected icon list.

 

Thanks!

Attachments:

You must be logged in to view attached files.

[sharmstr]

Is your icon a font icon or an image?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[marie-soleil]

an image

[sharmstr]

You need to add custom css to the page that will change the icon to your image. In the example below, I’ve changed the bitcoin icon to an image on my server

COPY CODE

.icon-bitcoin:before {
    content: url('http://localhost:8080/kleo/wp-content/uploads/2015/12/Attractions.png');
}

You can find the name of the icon by right clicking on it and inspecting. Make sure you add the css to the page by clicking on the gear icon. If you add it in quick css or your child theme, it will apply the change site wide instead of on the page itself.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[marie-soleil]

Ok, I done the test. But the result is not really nice. (See the attachement).
Would it be the same approach if a use an icone?

Thanks,
Marie-Soleil

Attachments:

You must be logged in to view attached files.

[sharmstr]

add this to the css to align it

COPY CODE

    margin-left: -30px !important;

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[marie-soleil]

It’s working, thanks a lot! 🙂

[sharmstr]

You’re welcome.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Author]

Posts