Font Awesome icons get hidden after css transform-CodePudding

When running the code below and hovering over any of the icons, there is a transform taking place, that should result in a white icon to be displayed. The white icon is show during transform but gets hidden after that. I do not see why? Icon color is still #fff in CSS after transform. Any help would be appreciated! Thanks.

    <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/[email protected]/css/brands.min.css">
</head>

<body>
    <div >
        <a  href="#"><i ></i></a>
        <a  href="#"><i ></i></a>
        <a  href="#"><i ></i></a>
        <a  href="#"><i ></i></a>
        <a  href="#"><i ></i></a>
        <a  href="#"><i ></i></a>
        <a  href="#"><i ></i></a>
        <a ><i ></i></a>
    </div>

</body>
</html>

CodePudding user response：

give z-index:-1 for .social-btns .btn:before

CodePudding user response：

Just add z-index: -1 as shown below. Whenever you want to use absolute value then always mention z-index.

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

CodePudding user response：

z-index is your isssue.

try this (example for linked in icon)

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

CodePudding user response：

The before element is hiding the icon. Quick fix: add z-index:-1 to it

    <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/[email protected]/css/brands.min.css">
</head>

<body>
    <div >
        <a  href="#"><i ></i></a>
        <a  href="#"><i ></i></a>
        <a  href="#"><i ></i></a>
        <a  href="#"><i ></i></a>
        <a  href="#"><i ></i></a>
        <a  href="#"><i ></i></a>
        <a  href="#"><i ></i></a>
        <a ><i ></i></a>
    </div>

</body>
</html>