Replace font-awesome icons with custom icons

Hi there,

I’m trying to replace some of the classic icons with custom icons I have created, but i’m having some strange issues.

I have the following code:

.custom-icon a,
.custom-icon a:hover {
    background-color: transparent !important;
}

i.custom-icon {
    background-size: 75% !important;
}

i.custom-icon:before {
    opacity: 0 !important;
}

i.custom-icon.icon-wind {
    background-size: 75% !important;
    background: url("_images/icon-wind.png") no-repeat center center !important;
}

What is happening:

  1. for some reason the background image size seams to be overwritten, but I can’t see where?

  2. For a bit, they were working and I could see them both in cornerstone and when I saved and viewed the page. But when I view the page through a private window, the original font-awesome icons are showing and I don’t see any of my css rendering out.

I don’t have the site caching. Here is the page i’m having issues with: https://lifestylehearing.ca/temp-hearing-aid-features/

Thank you in advance

Hi there,

Please make a complete backup of your website and update the theme to version 1.2.7:

After that, add the CSS code to Pro > Launch > Theme Options > CSS.

You will need to change the code regarding the URL of the image. You need to add an absolute URL. Go to the Media menu item in the WordPress Dashboard and find the image and copy the URL of it to add in the code.

Thank you.

Great that worked! I apologize, I had auto updates enabled but it seams my licenses got deleted in the settings so the updates wern’t working. Seams all good now :slight_smile: Thank you!

You’re most welcome.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.