Circular icon border issue

[rystaman]

Hi there,

I’m having some issue in regards to my circular icon borders on http://staging.dwanedigital.co.uk/.

The icons have a class of icon1 and the CSS I have used for this (and the hover animation) is:

/* ICON1 */

.icon1 {
border: solid 2px #232323 !important;
transition: all 0.3s ease-in !important;
}
.icon1:hover {
border-color: #5197e6 !important;
background-color: #5197e6 !important;
color: #ffffff !important;
}

As you can see it also contains a border around the whole icon section too?

Here are my settings within the inspector for the icon

Any help with this would be great, i’m sure it’s something simple i’m missing!

Thanks

Ryan

[mldarshana]

Hi Ryan,

Thanks for writing in! I have checked your site on Chrome, Safari and Firefox but I could not experience such issue.

Please make sure to clear all caches when testing your issue again (https://www.wpbeginner.com/beginners-guide/how-to-clear-your-cache-in-wordpress/).

Let us know how it goes.
Thanks!

[rystaman]

Hi mldarshana,

I have already cleared my browser cache and all of my wordpress cache’s but the square borders still show in addition the the circular ones within Cornerstone. Granted this doesn’t appear on the live site but it does when editing on the page.

Surely this shouldn’t appear on the editor within Cornerstone?

Thanks

Ryan

[Prasant]

Hello Ryan,

Thanks for updating the thread.

If the icons are broken in Cornerstone, test for a plugin conflict. You can do this by deactivating all third-party plugins, and see if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

If you still have problems kindly get back to us with the result of the steps above and URL/User/Pass of your WordPress dashboard using the Secure Note functionality of the post to follow up the case.

Thank you.