はホバーボーダーグラデーションを背景に塗りつぶします

Question

グラデーション付きの丸い境界線を持つファーバーアイコンがあります。ホバー効果を入れてアイコンを回転させると、背景が境界グラデーションで塗りつぶされます。アイコンが回転している間、背景を透明にしておきたい。

ここにはcodepenです。ご協力いただければ幸いです。

.circle-icon { 
    width: 2em; 
    height: 2em; 
    position: relative; 
    margin: auto; 
    margin: 30px; 
    border-radius: 50%; 
    background: #fff; 
} 
.circle-icon:after { 
    content: ''; 
    position: absolute; 
    top: -5px; 
    bottom: -5px; 
    right: -5px; 
    left: -5px; 
    background-image: linear-gradient(to top right, #3BB44A 0%, #4DA5EC 100%); 
    z-index: -1; 
    border-radius: inherit; 
} 

.fa { 
    text-align: center; 
    padding-top: .5em; 
    font-size: 3em; 
    color: #4DA5EC; 
    -webkit-transition: -webkit-transform .8s ease-in-out; 
    transition: transform .8s ease-in-out; 
} 

.fa:hover { 
    -webkit-transform: rotate(360deg); 
    transform: rotate(360deg); 
} 

Answer 1

私はfa-chevron-downクラスの擬似セレクタを使用して動作させることができました。

.fa-chevron-down:before{ 
    background:white; 
    border-radius:50%; 
    padding: 24px; 
}