Make Icon Start Solid White

[tsimarketing]

On one of the pages of our website I have four icons that are on top of a parallax image. Right now they start off clear with white outlines then when you hover over them they become solid white. My supervisor was wondering if I could make them start off sold white and then when you hover over them they become clear with white outlines? But I would only want this done to this specific section. I have attached a screenshot of the section I’m talking about.

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Hi

Try adding this to your custom css:

.sf-icon-icon-four .sf-icon-cont {
  background-color: #ffffff;
}
.sf-icon-icon-four:hover .sf-icon-cont {
  background-color: transparent!important;
}
.sf-icon-cont.sf-icon-icon-four .sf-icon {
  color: #6caae4;
}
.sf-icon-cont.sf-icon-icon-four:hover .sf-icon {
  color: #ffffff;
}

If it doesn’t work try adding !important to all of the properties

– Kyle

[tsimarketing]

Yes, that worked! Thanks!

[Kyle – SUPPORT]

Great, no problem

– Kyle

[tsimarketing]

Is it possible to do the same thing to the modal button right below those icons? But just to that modal and not the other modals on the page?

[Kyle – SUPPORT]

You should just use a white button instead of the transparent button

– Kyle

[tsimarketing]

Yeah I tried that but the text on the modal is black instead of the light blue. Is there a way to change the text color?

[Kyle – SUPPORT]

That’s odd, the button color should not effect the modal content. Can you please put both on the page so I can see the difference?

– Kyle

[tsimarketing]

Okay I put both on the page. I wasn’t talking about the modal content, that didn’t change. The text on the modal button is black and I would like it to be the light blue I’ve been using.

[Kyle – SUPPORT]

Try adding this:

a.sf-button.white, a.sf-button.white:hover {
  color: #6caae4!important;
}

– Kyle