CODEWITHSUNDEEP
htmlcss
SiliconMachine
SiliconMachine

Reputation: 606

How to put animation to Font Awesome icons

I'm trying to add some animations to buttons that go to my social networks in my portfolio webpage.

I want to add animations only to the icons and not to the whole "button".

The problem here is that seems that I stylized my FA as buttons and didn't make buttons as elements. But i cannot figure out how to change this or make a button work as a link but with the FA icon.

HTML

<a target='_blank' href="mylinktofb" class="fa fa-facebook fa-3x"></a>
<a target='_blank' href="mylinktoig" class="fa fa-instagram fa-3x"></a>
<a target='_blank' href="mylinktoli" class="fa fa-linkedin fa-3x"></a>
<a id="fcc" target='_blank' href="mylinktofc" class="fa fa-free-code-camp fa-3x"></a>
<a target='_blank' href="mylinktocp" class="fa fa-codepen fa-3x"></a>
<a target='_blank' href="mylinktogh" class="fa fa-github fa-3x"></a>

CSS

.fa {
  display: block;
  float: left;
  margin: auto;
  height: 50px;
  font-size: 30px;
  padding-top: 10px;
  width: 225px;
  text-align: center;
  text-decoration: none;
}

.fa-facebook {
  background: #3b5998;
  color: white;
}

.fa-instagram {
  background: #fd1d1d;
  color: white;
}

.fa-codepen {
  background: black;
  color: white;
}

.fa-github {
  background: #333;
  color: white;
}

.fa-linkedin {
  background: #0077b5;
  color: white;
}

#fcc {
  background: #006400;
  color: white;
}

As an example, i want to put this effect to them: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_buttons_animate1

Thanks to all in advance!

Upvotes: 1

Views: 2585

Answers (2)

Serge In&#225;cio
Serge In&#225;cio

Reputation: 1382

Obviously the font awesome is not present here, just did it for facebook and replaced the icon with an "f":

.social {
  display:block;
  float:left;
  margin:auto;
  height: 50px;
  font-size: 30px;
  padding-top: 10px;
  width: 225px;
  text-align: center;
  text-decoration: none;
}

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

.social i {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.social i:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.social:hover i {
  padding-right: 25px;
}

.social:hover i:after {
  opacity: 1;
  right: 0;
}
<a class="social my-facebook" target='_blank' href="mylinktofb"><i class="fa fa-facebook fa-3x">f</i></a>

EDIT: Added some classes. Better reference now :)

Hope it helps, Regards

Upvotes: 1

Steven Johnston
Steven Johnston

Reputation: 1859

Wrap your old tag around each icon like so. This way you can animate just the icon.

<a target='_blank' href="mylinktofb">
    <i class="fa fa-facebook fa-3x" aria-hidden="true"></i>
</a>

Upvotes: 0

Related Questions