Benedikt Winckler Benedikt Winckler - 6 months ago 10
HTML Question

How can I add a link to the <i> tag?

I try to style some tags to get some good-looking social media buttons.

This is my current code:



@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");

/* General rule */

.dist {
margin-left: 7px;
}
.button-big {
font-size: 2em;
width: 50px;
text-align: center;
padding: 0.2em 0em 0.2em 0em;
display: inline-block;
}
/* Facebook class and animation */

.facebook {
color: #3B5998;
border: 1px solid #3B5998;
}
.facebook:hover {
animation: facebookAnim 0.4s normal forwards linear;
-webkit-animation: facebookAnim 0.4s normal forwards linear;
}
@keyframes facebookAnim {
50% {
background-color: #3B5998;
}
100% {
background-color: #3B5998;
border: 1px solid #3B5998;
color: #fff;
}
}
@-webkit-keyframes facebookAnim {
50% {
background-color: #3B5998;
}
100% {
background-color: #3B5998;
border: 1px solid #3B5998;
color: #fff;
}
}
/* YouTube class and animation */

.youtube {
color: #bb0000;
border: 1px solid #bb0000;
}
.youtube:hover {
animation: youtubeAnim 0.4s normal forwards linear;
-webkit-animation: youtubeAnim 0.4s normal forwards linear;
}
@keyframes youtubeAnim {
50% {
background-color: #bb0000;
}
100% {
background-color: #bb0000;
border: 1px solid #bb0000;
color: #fff;
}
}
@-webkit-keyframes youtubeAnim {
50% {
background-color: #bb0000;
}
100% {
background-color: #bb0000;
border: 1px solid #bb0000;
color: #fff;
}
}
/* Instagram class and animation */

.instagram {
color: #125688;
border: 1px solid #125688;
}
.instagram:hover {
animation: instaAnim 0.4s normal forwards linear;
-webkit-animation: instaAnim 0.4s normal forwards linear;
}
@-webkit-keyframes instaAnim {
50% {
background-color: #125688;
}
100% {
background-color: #125688;
border: 1px solid #125688;
color: #fff;
}
}
@keyframes instaAnim {
50% {
background-color: #125688;
}
100% {
background-color: #125688;
border: 1px solid #125688;
color: #fff;
}
}
/* link style */

.facebook a {
color: #3B5998;
}
.youtube a {
color: #bb0000;
}
.instagram a {
color: #125688;
}
.facebook a:hover {
color: #fff;
}
.youtube a:hover {
color: #fff;
}
.instagram a:hover {
color: #fff;
}

<div class="facebook button-big">
<a href="#"><i class="fa fa-facebook"></i></a>
</div>
<div class="youtube button-big dist">
<a href="#"><i class="fa fa-youtube"></i></a>
</div>
<div class="instagram button-big dist">
<a href="#"><i class="fa fa-instagram"></i></a>
</div>





The problem is that the links is just on the icon, so when I hover the button a bit outside, the icon is style in the old color and not white. I hope you get what I mean, just have a look please.
How can I fix this the best way?

Answer

Encapsulate the divs in the a tags. Add some styling to the a tag.

@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");

/* General rule */

a {
    text-decoration: none;
}

.dist {
  margin-left: 7px;
}
.button-big {
  font-size: 2em;
  width: 50px;
  text-align: center;
  padding: 0.2em 0em 0.2em 0em;
  display: inline-block;
}
/* Facebook class and animation */

.facebook {
  color: #3B5998;
  border: 1px solid #3B5998;
}
.facebook:hover {
  animation: facebookAnim 0.4s normal forwards linear;
  -webkit-animation: facebookAnim 0.4s normal forwards linear;
}
@keyframes facebookAnim {
  50% {
    background-color: #3B5998;
  }
  100% {
    background-color: #3B5998;
    border: 1px solid #3B5998;
    color: #fff;
  }
}
@-webkit-keyframes facebookAnim {
  50% {
    background-color: #3B5998;
  }
  100% {
    background-color: #3B5998;
    border: 1px solid #3B5998;
    color: #fff;
  }
}
/* YouTube class and animation */

.youtube {
  color: #bb0000;
  border: 1px solid #bb0000;
}
.youtube:hover {
  animation: youtubeAnim 0.4s normal forwards linear;
  -webkit-animation: youtubeAnim 0.4s normal forwards linear;
}
@keyframes youtubeAnim {
  50% {
    background-color: #bb0000;
  }
  100% {
    background-color: #bb0000;
    border: 1px solid #bb0000;
    color: #fff;
  }
}
@-webkit-keyframes youtubeAnim {
  50% {
    background-color: #bb0000;
  }
  100% {
    background-color: #bb0000;
    border: 1px solid #bb0000;
    color: #fff;
  }
}
/* Instagram class and animation */

.instagram {
  color: #125688;
  border: 1px solid #125688;
}
.instagram:hover {
  animation: instaAnim 0.4s normal forwards linear;
  -webkit-animation: instaAnim 0.4s normal forwards linear;
}
@-webkit-keyframes instaAnim {
  50% {
    background-color: #125688;
  }
  100% {
    background-color: #125688;
    border: 1px solid #125688;
    color: #fff;
  }
}
@keyframes instaAnim {
  50% {
    background-color: #125688;
  }
  100% {
    background-color: #125688;
    border: 1px solid #125688;
    color: #fff;
  }
}
/* link style */

.facebook a {
  color: #3B5998;
}
.youtube a {
  color: #bb0000;
}
.instagram a {
  color: #125688;
}
.facebook a:hover {
  color: #fff;
}
.youtube a:hover {
  color: #fff;
}
.instagram a:hover {
  color: #fff;
}
<a href="#">
	<div class="facebook button-big">
		<i class="fa fa-facebook"></i>
	</div>
</a>
<a href="#">
	<div class="youtube button-big dist">
		<i class="fa fa-youtube"></i>
	</div>
</a>
<a href="#">
	<div class="instagram button-big dist">
		<i class="fa fa-instagram"></i>
	</div>
</a>

Comments