How to add Icon Hover and Circular border?

[rystaman]

I’m looking on how to add a circular border around the icons and to change the hover colour like the example here - http://www.thestartupguys.co.uk/

I’ve tried multiple variants of my own CSS code and tried to piece some together from previous topics but couldn’t get it to work so I deleted it.

My website is www.rjdesigns.website

Thanks

[ruenel]

Hello There,

Thanks for writing in! Please edit the page back in Cornerstone and click each icon. You must set the icon color and the background color. Please do not forget to add a custom class like this:

And then insert the following custom css in the settings tab, Settings > Custom CSS

.my-icon {
  border: solid 1px black;
}

.my-icon:hover {
  border-color: red;
  background-color: green;
}

The css code sets the border, border and background colors when you hover over the icon.

Hope this helps.

[rystaman]

It’s close but it’s not quite there. The CSS code wasn’t working to set the background or icon color when hovering and the icon isn’t in the middle of the border. I’ve edited the CSS code to this (placed it in Options - CSS)

.my-icon {
border: solid 2px #818181;
}

.my-icon:hover {
border-color: #670000;
background-color: #670000; !important
color: white; !important
}

and here is what my inspector looks like

(For some reason the screenshot is not showing the full image but is in the preview)

But the code for the web design icon isn’t working on hover but the border is and the code for the logo design is working on the hover but the color of the icon isn’t working on hover.

[nabeel]

Hi again,

Please replace your code with this:

.icon1 {
    border: solid 2px #818181 !important;
    transition: all 0.3s ease-in !important;
}
.icon1:hover {
    border-color: #670000 !important;
    background-color: #670000 !important;
    color: #fff !important;
}

Do the same for other icons too. Hope this helps!

[rystaman]

Thanks that’s working great!

[jade]

You’re welcome.