Google Chrome 字体真棒图标有问题吗？它不支持吗？

Question

我正在制作我的投资组合网页，我做了一个小的“联系我”division，它是圆形的。我使用了一些 css，所以现在当我将鼠标悬停在联系我的通告 div 上时，我会以一种很酷的过渡方式在它周围出现 6 或 7 个图标，我的 linkedin 的图标， gmail、instagram.. 等等。我现在面临的问题，我已经尝试了很多来自 Whosebug 的建议，我看到了这种情况，我看到我的图标和一切都按照我想要的方式显示在 Mozilla FireFox 上 css 但是当我在 Chrome 上打开网页时，当我将鼠标指针悬停在联系我 div 上时，会向我显示所有 link 图标，即我仍然可以按空白space 在 div 附近，它将带我到我的社交媒体 link，但图标的视觉表示是 none，这意味着我看不到任何正在加载的图标在 Chrome 上，我看到 Mozilla 甚至 Microsoft Edge 上的所有图标都是一样的。 Google Chrome 是否存在问题，因为出于某种原因图标没有加载到 Google Chrome 上？我在这里分享我的一半 html 和 css 代码。

这是我的主要div，我什么都有：

<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>

还有我用过的css

    .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;
}

最后但同样重要的是，这些是我的进口商品。

    <!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>

我想尽快托管这个作品集，但我仍然坚持最后一件事，它已经在一个浏览器上运行，但在另一个浏览器上却不行。有人可以帮忙吗？？

Answer 1

我不是专家，但可能会再次在 Font Awesome 上查找图标并检查他们是否可能更改了 class 名称，如果是，请更新它，同样适用于 CDN link

Google Chrome 字体真棒图标有问题吗？它不支持吗？

Does Google Chrome have a problem with Font-Awesome Icons. Does it not support it?

html

css

font-awesome

font-awesome-5

font-awesome-4