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('http://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
Thread Starter
chook
(@chook)
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.