Font Awesome 图标在 css 转换后隐藏

Question

当运行下面的代码并将鼠标悬停在任何图标上时，会发生转换，这应该会导致显示白色图标。白色图标在变换期间显示，但之后隐藏。我不明白为什么？变换后 CSS 中的图标颜色仍然是#fff。任何帮助，将不胜感激！谢谢

    <style>
        
        * {
          margin: 0;
          padding: 0;
          font-size: inherit;
          color: inherit;
          box-sizing: inherit;
          -webkit-font-smoothing: antialiased;
        }
        
        html,
        body {
          height: 100%;
        }

        html {
          box-sizing: border-box;
        }

        body {
          background-color: #ecf0f1;
          min-width: 300px;
          font-family: "Open Sans", sans-serif;
          font-size: 16px;
        }

        a {
          text-decoration: none;
        }
                
        i.fa-brands {
            font-style: normal;
        }
        
        .social-btns {
          height: 90px;
          margin: auto;
          text-align: center;
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
        }
        
        .social-btns .btn,
        .social-btns .btn:before,
        .social-btns .btn .fa-brands {
          transition: all 0.35s;
          transition-timing-function: cubic-bezier(0.31, -0.105, 0.43, 1.59);
        }
        
        .social-btns .btn:before {
          top: 90%;
          left: -110%;
        }
        
        .social-btns .btn .fa-brands {
          transform: scale(0.8);
        }
        
        .social-btns .btn.facebook:before {
          background-color: #3b5998;
        }
        
        .social-btns .btn.facebook .fa-brands {
          color: #3b5998;
        }
        
        .social-btns .btn.twitter:before {
          background-color: #3cf;
        }
        
        .social-btns .btn.twitter .fa-brands {
          color: #3cf;
        }
        
        .social-btns .btn.steam:before {
          background-color: #171a21;
        }
        
        .social-btns .btn.steam .fa-brands {
          color: #171a21;
        }
        
        .social-btns .btn.github:before {
          background-color: #24292f;
        }
        
        .social-btns .btn.github .fa-brands {
          color: #000;
        }
        
        .social-btns .btn.instagram:before {
          background-color: #E1306C;
        }
        
        .social-btns .btn.instagram .fa-brands {
          color: #E1306C;
        }
        
        .social-btns .btn.linkedin:before {
          background-color: #0a66c2;
        }
        
        .social-btns .btn.linkedin .fa-brands {
          color: #0a66c2;
        }
        
        .social-btns .btn.xing:before {
          background-color: rgb(6, 152, 160);
        }
        
        .social-btns .btn.xing .fa-brands {
          color: rgb(6, 152, 160);
        }
        
        .social-btns .btn.xbox:before {
          background-color: #107c10;
        }
        
        .social-btns .btn.xbox .fa-brands {
          color: #107c10;
        }
        
        .social-btns .btn:focus:before,
        .social-btns .btn:hover:before {
          top: -10%;
          left: -10%;
        }
        
        .social-btns .btn:focus .fa-brands,
        .social-btns .btn:hover .fa-brands {
          color: #fff;
          transform: scale(1);
        }
        
        .social-btns .btn {
          display: inline-block;
          background-color: #fff;
          width: 90px;
          height: 90px;
          line-height: 90px;
          margin: 0 10px;
          text-align: center;
          position: relative;
          overflow: hidden;
          border-radius: 28%;
          box-shadow: 0 5px 15px -5px rgba(0,0,0,0.1);
          opacity: 0.99;
        }
        
        .social-btns .btn:before {
          content: '';
          width: 120%;
          height: 120%;
          position: absolute;
          transform: rotate(45deg);
        }
        
        .social-btns .btn .fa-brands {
          font-size: 38px;
          vertical-align: middle;
        }
    </style>

<html lang="de">
<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.1/css/brands.min.css">
</head>

<body>
    <div class="social-btns">
        <a class="btn linkedin" href="#"><i class="fa-brands fa-linkedin-in"></i></a>
        <a class="btn xing" href="#"><i class="fa-brands fa-xing"></i></a>
        <a class="btn github" href="#"><i class="fa-brands fa-github"></i></a>
        <a class="btn facebook" href="#"><i class="fa-brands fa-facebook-f"></i></a>
        <a class="btn twitter" href="#"><i class="fa-brands fa-twitter"></i></a>
        <a class="btn instagram" href="#"><i class="fa-brands fa-instagram"></i></a>
        <a class="btn steam" href="#"><i class="fa-brands fa-steam"></i></a>
        <a class="btn xbox"><i class="fa-brands fa-xbox"></i></a>
    </div>

</body>
</html>

Answer 1

给 z-index:-1 .social-btns .btn:before

Answer 2

z-index 是你的问题。

试试这个（linkedin 图标示例）

.social-btns .btn.linkedin::before {
     background-color: #0a66c2;
     z-index: -1;
 }

Answer 3

before 元素隐藏了图标。快速修复：将 z-index:-1 添加到

    <style>
        
        * {
          margin: 0;
          padding: 0;
          font-size: inherit;
          color: inherit;
          box-sizing: inherit;
          -webkit-font-smoothing: antialiased;
        }
        
        html,
        body {
          height: 100%;
        }

        html {
          box-sizing: border-box;
        }

        body {
          background-color: #ecf0f1;
          min-width: 300px;
          font-family: "Open Sans", sans-serif;
          font-size: 16px;
        }

        a {
          text-decoration: none;
        }
                
        i.fa-brands {
            font-style: normal;
        }
        
        .social-btns {
          height: 90px;
          margin: auto;
          text-align: center;
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
        }
        
        .social-btns .btn,
        .social-btns .btn:before,
        .social-btns .btn .fa-brands {
          transition: all 0.35s;
          transition-timing-function: cubic-bezier(0.31, -0.105, 0.43, 1.59);
        }
        
        .social-btns .btn:before {
          top: 90%;
          left: -110%;
        }
        
        .social-btns .btn .fa-brands {
          transform: scale(0.8);
        }
        
        .social-btns .btn.facebook:before {
          background-color: #3b5998;
        }
        
        .social-btns .btn.facebook .fa-brands {
          color: #3b5998;
        }
        
        .social-btns .btn.twitter:before {
          background-color: #3cf;
        }
        
        .social-btns .btn.twitter .fa-brands {
          color: #3cf;
        }
        
        .social-btns .btn.steam:before {
          background-color: #171a21;
        }
        
        .social-btns .btn.steam .fa-brands {
          color: #171a21;
        }
        
        .social-btns .btn.github:before {
          background-color: #24292f;
        }
        
        .social-btns .btn.github .fa-brands {
          color: #000;
        }
        
        .social-btns .btn.instagram:before {
          background-color: #E1306C;
        }
        
        .social-btns .btn.instagram .fa-brands {
          color: #E1306C;
        }
        
        .social-btns .btn.linkedin:before {
          background-color: #0a66c2;
        }
        
        .social-btns .btn.linkedin .fa-brands {
          color: #0a66c2;
        }
        
        .social-btns .btn.xing:before {
          background-color: rgb(6, 152, 160);
        }
        
        .social-btns .btn.xing .fa-brands {
          color: rgb(6, 152, 160);
        }
        
        .social-btns .btn.xbox:before {
          background-color: #107c10;
        }
        
        .social-btns .btn.xbox .fa-brands {
          color: #107c10;
        }
        
        .social-btns .btn:focus:before,
        .social-btns .btn:hover:before {
          top: -10%;
          left: -10%;
          z-index:-1;
        }
        
        .social-btns .btn:focus .fa-brands,
        .social-btns .btn:hover .fa-brands {
          color: #fff;
          transform: scale(1);
        }
        
        .social-btns .btn {
          display: inline-block;
          background-color: #fff;
          width: 90px;
          height: 90px;
          line-height: 90px;
          margin: 0 10px;
          text-align: center;
          position: relative;
          overflow: hidden;
          border-radius: 28%;
          box-shadow: 0 5px 15px -5px rgba(0,0,0,0.1);
          opacity: 0.99;
        }
        
        .social-btns .btn:before {
          content: '';
          width: 120%;
          height: 120%;
          position: absolute;
          transform: rotate(45deg);
        }
        
        .social-btns .btn .fa-brands {
          font-size: 38px;
          vertical-align: middle;
        }
    </style>

<html lang="de">
<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.1/css/brands.min.css">
</head>

<body>
    <div class="social-btns">
        <a class="btn linkedin" href="#"><i class="fa-brands fa-linkedin-in"></i></a>
        <a class="btn xing" href="#"><i class="fa-brands fa-xing"></i></a>
        <a class="btn github" href="#"><i class="fa-brands fa-github"></i></a>
        <a class="btn facebook" href="#"><i class="fa-brands fa-facebook-f"></i></a>
        <a class="btn twitter" href="#"><i class="fa-brands fa-twitter"></i></a>
        <a class="btn instagram" href="#"><i class="fa-brands fa-instagram"></i></a>
        <a class="btn steam" href="#"><i class="fa-brands fa-steam"></i></a>
        <a class="btn xbox"><i class="fa-brands fa-xbox"></i></a>
    </div>

</body>
</html>

Answer 4

只需添加 z-index: -1，如下所示。每当您想使用 absolute 值时，请始终提及 z-index.

.social-btns .btn:before {
    content: '';
    width: 120%;
    height: 120%;
    position: absolute;
    transform: rotate(45deg);
    z-index: -1;
}

Font Awesome 图标在 css 转换后隐藏

Font Awesome icons get hidden after css transform

html

css