Shopify Question posted in
The Shopify help center can be found here.

Icon displaying after hovering – Shopify

I can’t see the icon until i hover over it.

This is for a shopify website

I’m using this code to call

"<div class="icon-button twitter">
                    <i class="fab fa-twitter"></i><span></span>
                    <a href="https://twitter.com" </a>
                  </div>"

This is the main code that I’m using.
So, everything works, but instead of the icon displaying on my website before i hover over it, there is nothing there. It’s blank. When i move my mouse over it it does it effect.

html {
    font-size: 2.5em;
}
body {
    background-color: #fff;
    padding: 25px;
    text-align: center;
}

/* Wrapper */
.icon-button {
    background-color: white;
    border-radius: 2.6rem;
    cursor: pointer;
    display: inline-block;
    font-size: 1.3rem;
    height: 2.6rem;
    line-height: 2.6rem;
    margin: 0 5px;
    position: relative;
    text-align: center;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    width: 2.6rem;
}

/* Circle */
.icon-button span {
    border-radius: 0;
    display: block;
    height: 0;
    left: 50%;
    margin: 0;
    position: absolute;
    top: 50%;
    -webkit-transition: all 0.3s;
       -moz-transition: all 0.3s;
         -o-transition: all 0.3s;
            transition: all 0.3s;
    width: 0;
}
.icon-button:hover span {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 2.6rem;
    margin: -1.3rem;
}

/* Icons */
.icon-button i {
    background: none;
    color: white;
    height: 2.6rem;
    left: 0;
    line-height: 2.6rem;
    position: absolute;
    top: 0;
    -webkit-transition: all 0.3s;
       -moz-transition: all 0.3s;
         -o-transition: all 0.3s;
            transition: all 0.3s;
    width: 2.6rem;
    z-index: 10;
}





.twitter span {
    background-color: #4099ff;
}
.facebook span {
    background-color: #3B5998;
}
.google-plus span {
    background-color: #db5a3c;
}
.tumblr span {
    background-color: #34526f;
}
.instagram span {
    background-color: #517fa4;
}
.youtube span {
    background-color: #bb0000;
}
.pinterest span {
    background-color: #cb2027;
}



.icon-button .icon-twitter {
    color: #4099ff;
}
.icon-button .icon-facebook {
    color: #3B5998;
}
.icon-button .fa-tumblr {
    color: #34526f;
}
.icon-button .icon-google-plus {
    color: #db5a3c;
}
.icon-button .fa-instagram {

  color: #FD1D1D;

}
.icon-button .fa-youtube {
    color: #bb0000;
}
.icon-button .fa-pinterest {
    color: #cb2027;
}




.icon-button:hover .icon-twitter,
.icon-button:hover .icon-facebook,
.icon-button:hover .icon-google-plus,
.icon-button:hover .fa-tumblr,
.icon-button:hover .fa-instagram,
.icon-button:hover .fa-youtube,
.icon-button:hover .fa-pinterest {
    color: white;
}

@media all and (max-width: 680px) {
  .icon-button {
    border-radius: 1.6rem;
    font-size: 0.8rem;
    height: 1.6rem;
    line-height: 1.6rem;
    width: 1.6rem;
  }

  .icon-button:hover span {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 1.6rem;
    margin: -0.8rem;
  }

  /* Icons */
  .icon-button i {
      height: 1.6rem;
      line-height: 1.6rem;
      width: 1.6rem;
  }
  body {

      padding: 10px;
  }
  .pinterest {
   display: none; 
  }

}
Tags:

2

Answers


  1. 0

    That seems to be because icon colors are the same as button backgrounds:

    .icon-button {
  background-color: white;
  ...
}

.icon-button i {
  color: white;
  ...
}

    I’ve changed the background color of buttons to gray as a demonstration:

    html {
  font-size: 2.5em;
}

body {
  background-color: #000;
  padding: 25px;
  text-align: center;
}


/* Wrapper */

.icon-button {
  background-color: gray;
  border-radius: 2.6rem;
  cursor: pointer;
  display: inline-block;
  font-size: 1.3rem;
  height: 2.6rem;
  line-height: 2.6rem;
  margin: 0 5px;
  position: relative;
  text-align: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 2.6rem;
}


/* Circle */

.icon-button span {
  border-radius: 0;
  display: block;
  height: 0;
  left: 50%;
  margin: 0;
  position: absolute;
  top: 50%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  width: 0;
}

.icon-button:hover span {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 2.6rem;
  margin: -1.3rem;
}


/* Icons */

.icon-button i {
  background: none;
  color: white;
  height: 2.6rem;
  left: 0;
  line-height: 2.6rem;
  position: absolute;
  top: 0;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  width: 2.6rem;
  z-index: 10;
}

.twitter span {
  background-color: #4099ff;
}

.facebook span {
  background-color: #3B5998;
}

.google-plus span {
  background-color: #db5a3c;
}

.tumblr span {
  background-color: #34526f;
}

.instagram span {
  background-color: #517fa4;
}

.youtube span {
  background-color: #bb0000;
}

.pinterest span {
  background-color: #cb2027;
}

.icon-button .icon-twitter {
  color: #4099ff;
}

.icon-button .icon-facebook {
  color: #3B5998;
}

.icon-button .fa-tumblr {
  color: #34526f;
}

.icon-button .icon-google-plus {
  color: #db5a3c;
}

.icon-button .fa-instagram {
  color: #FD1D1D;
}

.icon-button .fa-youtube {
  color: #bb0000;
}

.icon-button .fa-pinterest {
  color: #cb2027;
}

.icon-button:hover .icon-twitter,
.icon-button:hover .icon-facebook,
.icon-button:hover .icon-google-plus,
.icon-button:hover .fa-tumblr,
.icon-button:hover .fa-instagram,
.icon-button:hover .fa-youtube,
.icon-button:hover .fa-pinterest {
  color: white;
}

@media all and (max-width: 680px) {
  body {
    padding: 10px;
  }
  .icon-button {
    border-radius: 1.6rem;
    font-size: 0.8rem;
    height: 1.6rem;
    line-height: 1.6rem;
    width: 1.6rem;
  }
  .icon-button:hover span {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 1.6rem;
    margin: -0.8rem;
  }
  /* Icons */
  .icon-button i {
    height: 1.6rem;
    line-height: 1.6rem;
    width: 1.6rem;
  }
  .pinterest {
    display: none;
  }
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/fontawesome.min.css" rel="stylesheet" />
<div class="icon-button twitter">
  <i class="fab fa-twitter"></i><span></span>
  <a href="https://twitter.com"></a>
</div>

    Edit

    Upon further investigation, I notice that there is no CSS definition for .fa-twitter in your code. I’ve changed the element’s class to “icon-twitter”.

    <link href="https://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" />

<style>
  html {
    font-size: 2.5em;
  }
  
  body {
    background-color: #fff;
    padding: 25px;
    text-align: center;
  }
  /* Wrapper */
  
  .icon-button {
    background-color: white;
    border-radius: 2.6rem;
    cursor: pointer;
    display: inline-block;
    font-size: 1.3rem;
    height: 2.6rem;
    line-height: 2.6rem;
    margin: 0 5px;
    position: relative;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 2.6rem;
  }
  /* Circle */
  
  .icon-button span {
    border-radius: 0;
    display: block;
    height: 0;
    left: 50%;
    margin: 0;
    position: absolute;
    top: 50%;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    width: 0;
  }
  
  .icon-button:hover span {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 2.6rem;
    margin: -1.3rem;
  }
  /* Icons */
  
  .icon-button i {
    background: none;
    color: white;
    height: 2.6rem;
    left: 0;
    line-height: 2.6rem;
    position: absolute;
    top: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    width: 2.6rem;
    z-index: 10;
  }
  
  .twitter span {
    background-color: #4099ff;
  }
  
  .facebook span {
    background-color: #3B5998;
  }
  
  .google-plus span {
    background-color: #db5a3c;
  }
  
  .tumblr span {
    background-color: #34526f;
  }
  
  .instagram span {
    background-color: #517fa4;
  }
  
  .youtube span {
    background-color: #bb0000;
  }
  
  .pinterest span {
    background-color: #cb2027;
  }
  
  .icon-button .icon-twitter {
    color: #4099ff;
  }
  
  .icon-button .icon-facebook {
    color: #3B5998;
  }
  
  .icon-button .fa-tumblr {
    color: #34526f;
  }
  
  .icon-button .icon-google-plus {
    color: #db5a3c;
  }
  
  .icon-button .fa-instagram {
    color: #FD1D1D;
  }
  
  .icon-button .fa-youtube {
    color: #bb0000;
  }
  
  .icon-button .fa-pinterest {
    color: #cb2027;
  }
  
  .icon-button:hover .icon-twitter,
  .icon-button:hover .icon-facebook,
  .icon-button:hover .icon-google-plus,
  .icon-button:hover .fa-tumblr,
  .icon-button:hover .fa-instagram,
  .icon-button:hover .fa-youtube,
  .icon-button:hover .fa-pinterest {
    color: white;
  }
  
  @media all and (max-width: 680px) {
    .icon-button {
      border-radius: 1.6rem;
      font-size: 0.8rem;
      height: 1.6rem;
      line-height: 1.6rem;
      width: 1.6rem;
    }
    .icon-button:hover span {
      width: 1.6rem;
      height: 1.6rem;
      border-radius: 1.6rem;
      margin: -0.8rem;
    }
    /* Icons */
    .icon-button i {
      height: 1.6rem;
      line-height: 1.6rem;
      width: 1.6rem;
    }
    body {
      padding: 10px;
    }
    .pinterest {
      display: none;
    }
  }
</style>

<div class="icon-button twitter">
  <i class="fab icon-twitter"></i><span></span>
  <a href="https://twitter.com"></a>
</div>
    Login or Signup to reply.
  2. 0

    I got it. Just for others I changed .icon-twitter to .fa-twitter and .icon-button .icon-twitter to .icon-button .fa-twitter. Thank you , i could not have done it without your help – This is my first ever try at CSS lol.

    Thank you all again.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search