Support » Theme: Regina Lite » How to Change the Icons

  • Resolved chook

    (@chook)


    Hi,

    How can I change the icons on the ‘why choose us’ section on the front page?

    For example, the brain icon is not needed and I would like to change to a tooth.

    Best I can do is a CSS snip like below, but the brain still shows.

    .nc-icon-outline.health_brain::before {
        background-image: url('http://localhost/dental/wp-content/uploads/tooth-icon.png');
    }

    Thanks in advance.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Ion Rutz

    (@ionrutz_machothemes)

    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.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to Change the Icons’ is closed to new replies.