I am making my portfolio web page and I made a small "Contact me" division which is circular in shape. I used some css, so now when I hover over the contact me circular div, I get 6 or 7 icons coming around it in a cool transistional way, icons of my linkedin, gmail, instagram.. so on and so forth. The problem that I am facing at the moment and I have tried a lot of things from stackoverflow suggestions already, I see this happening, I see my icons and everything showing up just the way I wanted through css on Mozilla FireFox but when I open the web page on Chrome, my mouse pointer when I hover over the contact me div, shows me all the links to icons i.e. I can still press in an empty white space around the div and it will take me to my social media link, but the visual representation of the icons is none meaning I can't see any icons being loaded on Chrome and I see the same thing with all icons on Mozilla and even on Microsoft Edge. Is there a problem with Google Chrome regarding this cause the icons are just not being loaded on Google Chrome for some reason? I am sharing my half of the html and css code here.
This is my main div where I have everything:
<div class="navbar-contact">
Contact me
<ul class="menu">
<li>
<a
href="https://www.facebook.com/sanskar.kc.73/"
target="_blank"
class="icon-facebook"
>
<i class="fab fa-facebook-f"> </i>
</a>
</li>
<li>
<a
href="https://twitter.com/Sanskar65167812"
target="_blank"
class="icon-twitter"
>
<i class="fab fa-twitter"> </i>
</a>
</li>
<li>
<a
href="https://www.linkedin.com/in/sanskar49/"
target="_blank"
class="icon-linkedin"
>
<i class="fab fa-linkedin-in"> </i>
</a>
</li>
<li>
<a
href="https://mail.google.com/mail/u/0/#inbox"
target="_blank"
class="icon-envelope"
>
<i class="fa fa-envelope"> </i>
</a>
</li>
<li>
<a
href="https://www.instagram.com/sanskar49/?hl=en"
target="_blank"
class="icon-instagram"
>
<i class="fab fa-instagram"> </i>
</a>
</li>
<li>
<a
href="https://secure.skype.com/portal/profile"
target="_blank"
class="icon-skype"
>
<i class="fab fa-skype"> </i>
</a>
</li>
<li>
<a
href="https://www.pinterest.com/sanskarbc/_saved/"
target="_blank"
class="icon-pinterest"
>
<i class="fab fa-pinterest"> </i>
</a>
</li>
<li>
<a
href="https://github.com/Sanskar49"
target="_blank"
class="icon-github"
>
<i class="fab fa-github"> </i>
</a>
</li>
<li>
<a
href="https://mail.google.com/mail/u/0/#inbox"
target="_blank"
class="icon-google_plus"
>
<i class="fab fa-google-plus-g"> </i>
</a>
</li>
</ul>
</div>
And the css I have used for it.
.navbar-contact {
font-family: cursive;
width: 150px;
height: 150px;
line-height: 150px;
border-radius: 50%;
background: black;
margin: 95px auto;
position: relative;
cursor: pointer;
text-align: center;
font-size: 1.3em;
font-weight: 400;
color: white;
transition: 0.24s 0.2s;
}
.navbar-contact .menu {
list-style: none;
padding: 0;
margin: 0;
position: absolute;
top: -75px;
left: -75px;
border: 150px solid transparent;
cursor: default;
border-radius: 50%;
transform: scale(0);
transition: transform 1.4s 0.07s;
z-index: -1;
}
.navbar-contact:hover .menu {
transition: transform 0.4s 0.08s, z-index 0s 0.5s;
transform: scale(1);
z-index: 1;
}
.navbar-contact .menu li {
position: absolute;
top: -100px;
left: -100px;
transform-origin: 100px 100px;
transition: all 0.5s 0.1s;
}
.navbar-contact:hover .menu li {
transition: all 0.7s;
}
.navbar-contact .menu li a {
padding: 10%;
width: 45px;
height: 45px;
line-height: 45px;
border-radius: 50%;
background: white;
position: absolute;
font-size: 130%;
color: #f273b1;
transition: 0.7s;
}
.navbar-contact:hover .menu li:nth-child(1) {
transition-delay: 0.02s;
transform: rotate(85deg);
}
.navbar-contact:hover .menu li:nth-child(1) a {
transition-delay: 0.04s;
transform: rotate(635deg);
}
.navbar-contact:hover .menu li:nth-child(2) {
transition-delay: 0.04s;
transform: rotate(125deg);
}
.navbar-contact:hover .menu li:nth-child(2) a {
transition-delay: 0.08s;
transform: rotate(595deg);
}
.navbar-contact:hover .menu li:nth-child(3) {
transition-delay: 0.06s;
transform: rotate(165deg);
}
.navbar-contact:hover .menu li:nth-child(3) a {
transition-delay: 0.12s;
transform: rotate(555deg);
}
.navbar-contact:hover .menu li:nth-child(4) {
transition-delay: 0.08s;
transform: rotate(205deg);
}
.navbar-contact:hover .menu li:nth-child(4) a {
transition-delay: 0.16s;
transform: rotate(515deg);
}
.navbar-contact:hover .menu li:nth-child(5) {
transition-delay: 0.01s;
transform: rotate(245deg);
}
.navbar-contact:hover .menu li:nth-child(5) a {
transition-delay: 0.2s;
transform: rotate(475deg);
}
.navbar-contact:hover .menu li:nth-child(6) {
transition-delay: 0.12s;
transform: rotate(285deg);
}
.navbar-contact:hover .menu li:nth-child(6) a {
transition-delay: 0.24s;
transform: rotate(435deg);
}
.navbar-contact:hover .menu li:nth-child(7) {
transition-delay: 0.14s;
transform: rotate(325deg);
}
.navbar-contact:hover .menu li:nth-child(7) a {
transition-delay: 0.28s;
transform: rotate(395deg);
}
.navbar-contact:hover .menu li:nth-child(8) {
transition-delay: 0.16s;
transform: rotate(365deg);
}
.navbar-contact:hover .menu li:nth-child(8) a {
transition-delay: 0.32s;
transform: rotate(355deg);
}
.navbar-contact:hover .menu li:nth-child(9) {
transition-delay: 0.18s;
transform: rotate(405deg);
}
.navbar-contact:hover .menu li:nth-child(9) a {
transition-delay: 0.36s;
transform: rotate(315deg);
}
a,
a:hover {
text-decoration: none;
}
Last but not the least, these are my imports.
<!DOCTYPE html>
<html g="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="index.css" />
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.0.8/css/all.css"
integrity="sha384-3AB7yXWz4OeoZcPbieVW64vVXEwADiYyAEhwilzWsLw+9FgqpyjjStpPnpBO8o8S"
crossorigin="anonymous"
/>
<title>Portfolio</title>
</head>
I want to host this portfolio as soon as possible and I am stuck with this last thing which kind of already works on one browser but does not on another. Can anyone please help with this??
I'm not an expert but maybe look up the icons again on Font Awesome and check if they maybe changed the class names and if so update it, same goes for the CDN link