SimonLeCat SimonLeCat - 3 days ago 4
CSS Question

How can I use CSS transform-scale with ionicons?

I have this simple snippet with four buttons with a CSS scale transform:



.social-buttons {
height: 90px;
margin: auto;
font-size: 0;
text-align: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

.social-button {
display: inline-block;
background-color: #fff;
width: 90px;
height: 90px;
line-height: 90px;
margin: 0 10px;
text-align: center;
position: relative;
overflow: hidden;
opacity: .99;
border-radius: 28%;
box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.05);
-webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
.social-button:before {
content: '';
background-color: #000;
width: 120%;
height: 120%;
position: absolute;
top: 90%;
left: -110%;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
.social-button i {
position:relative;
font-size: 38px;
vertical-align: middle;
-webkit-transform: scale(0.8);
transform: scale(0.8);
-webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
.social-button.facebook:before {
background-color: #3B5998;
}
.social-button.facebook i {
color: #3B5998;
}
.social-button.twitter:before {
background-color: #3CF;
}
.social-button.twitter i {
color: #3CF;
}
.social-button.google:before {
background-color: #DC4A38;
}
.social-button.google i {
color: #DC4A38;
}
.social-button.youtube:before {
background-color: #F26798;
}
.social-button.youtube i {
color: #F26798;
}
.social-button:focus:before, .social-button:hover:before {
top: -10%;
left: -10%;
}
.social-button:focus i, .social-button:hover i {
color: #fff;
-webkit-transform: scale(1.5);
transform: scale(1.5);
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="http://code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css" rel="stylesheet"/>

<div class="social-buttons"><a href="#" class="social-button facebook"><i class="ion-social-facebook"></i></a><a href="#" class="social-button twitter"><i class="fa fa-twitter"></i></a><a href="#" class="social-button google"><i class="fa fa-google"></i></a><a href="#" class="social-button youtube"><i class="ion-social-youtube"></i></a>
</div>





As you can see, first and last buttons are with ionicons in the middle instead I used font awesome.

Why the scale transform doesn't work with ionicons?

Answer

The structure of Font Awesome and Ion Icons is slightly different.

You need to amend your final line to

.social-button:focus i, .social-button:hover i, /* font awesome */
.social-button:focus i, .social-button:hover i:before /* ionicons */
 {
  color: #fff;
  -webkit-transform: scale(1.5);
          transform: scale(1.5);
  }

/* Reset */

@import url(//codepen.io/chrisdothtml/pen/ojLzJK.css);
 .social-buttons {
  height: 90px;
  margin: auto;
  font-size: 0;
  text-align: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.social-button {
  display: inline-block;
  background-color: #fff;
  width: 90px;
  height: 90px;
  line-height: 90px;
  margin: 0 10px;
  text-align: center;
  position: relative;
  overflow: hidden;
  opacity: .99;
  border-radius: 28%;
  box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.05);
  -webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
  transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
.social-button:before {
  content: '';
  background-color: #000;
  width: 120%;
  height: 120%;
  position: absolute;
  top: 90%;
  left: -110%;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
  transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
.social-button i {
  position: relative;
  font-size: 38px;
  vertical-align: middle;
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
  -webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
  transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
.social-button.facebook:before {
  background-color: #3B5998;
}
.social-button.facebook i {
  color: #3B5998;
}
.social-button.twitter:before {
  background-color: #3CF;
}
.social-button.twitter i {
  color: #3CF;
}
.social-button.google:before {
  background-color: #DC4A38;
}
.social-button.google i {
  color: #DC4A38;
}
.social-button.dribbble:before {
  background-color: #F26798;
}
.social-button.dribbble i {
  color: #F26798;
}
.social-button:focus:before,
.social-button:hover:before {
  top: -10%;
  left: -10%;
}
.social-button:focus i,
.social-button:hover i,
.social-button:focus i,
.social-button:hover i:before {
  color: #fff;
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="http://code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css" rel="stylesheet" />

<div class="social-buttons"><a href="#" class="social-button facebook"><i class="ion-social-facebook"></i></a><a href="#" class="social-button twitter"><i class="fa fa-twitter"></i></a><a href="#" class="social-button google"><i class="fa fa-google"></i></a>
  <a href="#" class="social-button dribbble"><i class="ion-social-youtube"></i>
  </a>
</div>

Comments