html - 社交媒体图标透明度问题

Question

嘿，我的网页上有一些社交媒体图标，我希望它在默认情况下具有白色边框、透明背景和白色 Logo 。然后悬停在那个开关上，这样你就会得到一个白色的边框、白色的背景和透明的标志。但似乎由于 Logo 在悬停时是透明的，所以您看到的只是一个白色圆圈。我怎样才能使透明 Logo (即 facebook 中的 f)在悬停时仍然可见。 This page has what I'm going for (向下滚动到底部)我已经包含了到目前为止我所拥有的东西的一个 jsfiddle。

https://jsfiddle.net/p0sjxqht/

HTML:

<h2>Style Social Media Buttons</h2>


<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-instagram"></a>
<a href="#" class="fa fa-pinterest"></a>

CSS:

body{
background-color: #333;

}
.fa {
  padding: 20px;
  font-size: 30px;
  width: 30px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  border-radius: 50%;
}

.fa:hover {
background: white;
color:transparent;
}

.fa {
border:solid;
border-width:3px;
border-color:white;
background: transparent;
color: white;
}

Answer 1

使用与背景颜色相同的颜色:

.fa:hover {
    background: white;
    color: #333;
}