Currently designing my portfolio webpage, I created a unique "Contact me" section in circular form using CSS. When hovering over the circular div, 6 or 7 icons appear around it in a sleek transitional manner representing my LinkedIn, Gmail, Instagram profiles, and more. However, I'm encountering an issue where the icons display perfectly on Mozilla Firefox but not on Google Chrome. Even Microsoft Edge shows the same problem with loading the icons. Is there a compatibility issue with Google Chrome causing this mishap? Here is a snippet of the HTML and CSS code:
This is the primary div containing everything:
<div class="navbar-contact">
Contact me
<ul class="menu">
(icons here)
</ul>
</div>
And below is the CSS styling used for it:
.navbar-contact {
(CSS styling details)
}
(menu CSS styling)
<a,
a:hover {
text-decoration: none;
}
Lastly, these are the imports included:
<!DOCTYPE html>
<html g="en">
<head>
(imports details)
</head>
I am eager to launch my portfolio soon but this browser compatibility issue is holding me back. Any assistance to resolve this matter would be greatly appreciated!