Html 如何将动画设置为字体图标

我正在尝试添加一些动画到我的公文包网页中的社交网络按钮

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

这里的问题是，我似乎将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>

作为一个例子，我想让他们明白这一点：

---

提前感谢大家

像这样将您的旧标签环绕在每个图标上。通过这种方式，您可以仅为图标设置动画

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

---

很明显，这里不存在令人敬畏的字体，只是在facebook上使用，并将图标替换为“f”：

.social{
显示：块；
浮动：左；
保证金：自动；
高度：50px；
字体大小：30px；
填充顶部：10px；
宽度：225px；
文本对齐：居中；
文字装饰：无；
}
.我的脸书{
背景：#3B5998；
颜色：白色；
}
.社会一{
光标：指针；
显示：内联块；
位置：相对位置；
过渡：0.5s；
}
.社会一：之后{
内容：'\00bb'；
位置：绝对位置；
不透明度：0；
排名：0；
右：-20px；
过渡：0.5s；
}
.社交：悬停i{
右边填充：25px；
}
.社交：悬停i:之后{
不透明度：1；
右：0；
}

---

完美！！谢谢

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