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:
-
for some reason the background image size seams to be overwritten, but I can’t see where?
-
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