アニメーションをFont Awesomeアイコンにする方法

Question

私のポートフォリオWebページで私のソーシャルネットワークに行くボタンにアニメーションを追加しようとしています。

「ボタン」全体ではなく、アイコンだけにアニメーションを追加したいと思います。

ここでの問題は、自分の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

明らかに素晴らしいフォントがここに存在していない、ただの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>

EDIT：追加されましたいくつかのクラス。今より良い参照:)

は、それが役に立てば幸い よろしく

Answer 2

各アイコンの周りに古いタグを囲みます。この方法で、アイコンだけをアニメートできます。

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