html - 如何将动画添加到 Font Awesome 图标

Question

我正在尝试向我的投资组合网页中转到我的社交网络的按钮添加一些动画。

我只想为图标添加动画，而不是为整个“按钮”添加动画。

这里的问题是，我似乎将我的 FA 风格化为按钮，但没有将按钮作为元素。但我无法弄清楚如何更改它或使按钮用作链接但带有 FA 图标。

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;
}

举个例子，我想给他们加上这个效果: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_buttons_animate1

提前感谢大家!

Answer 1

很明显这里没有 awesome 字体，只是为 facebook 做了，并用“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>

编辑:添加了一些类。现在更好的引用:)

希望对你有帮助 问候