How to Change the Icons

Hello @chook,

First of all, thank you for using our themes and for looking to improve your setup. I feel like I should mention that you could easily set this up in the PRO version via a custom media picker and hundreds of custom icons from dashicons, nucleo and favicon.

I see that you have double :: in your selector, so you might be able to achieve this by hiding the current content while adding the background picture, but I had no results with that approach.

For now, the way I managed to deal with the icon via CSS was to add the background picture to the .health_brain class, since it is already hardcoded, and then hide the same element content:

.nc-icon-outline.health_brain{
    background-image: url('https://localhost/dental/wp-content/uploads/tooth-icon.png');
    width: 100px;
    height: 100px;
    margin-top: 12px;
    background-size: 100%;
    border-radius: 100%;
}
.nc-icon-outline.health_brain:before{
content: none;
}

Let me know if you got this alright.

Regards

Fantastic! Your CSS snip worked a treat.

For anyone that would like to see it in action – on a Free Hosting site so it may not be available for long – see here

I’ll have to visit the Pro Theme and see all the Goodies it provides ??

Thanks again.

Hi!
I Tried that solution but it didn’t work for me.
I just try to change this icon

<div class=”icon”>
<span class=”nc-icon-outline food_apple”></span>
</div>

I already check that the icon font is Nucle outline but I try to add dashicons but it didn′t work, can you help me please, just to change the icon of the apple please.