Css 鼠标悬停时的图标字体背景

在我网站的页脚（左列），我有一些社交媒体图标，它们是图标字体。在悬停时，我希望圆圈为红色，图标为白色。红色的圆圈起作用，但后面有一个白色的正方形。如何将白色限制为图标/圆圈的形状

这是我的HTLM：

<p class="share"><a href="#">l</a> <a href="#">i</a> <a href="#">g</a> <a href="#">f</a></p>

非常感谢你的帮助

Stefaan“图标/圆圈的形状”实际上是一个矩形。 您正在为链接设置白色背景。链接是一个矩形。 您将无法直接设置字体/字符背景的样式

因为你的图标都是圆形的，这里有一个小技巧你可以使用：

border-radius: 50px;

这只是一个猜测的数字，并不意味着它是正确的。只需找到与图标高度/宽度匹配的图标即可。

---

（您可能还需要调整行高，以确保字体位于或至少看起来垂直居中。）

对于这个问题没有简单的解决方案，因为您只依赖字体。您可以尝试将

边框半径

（您的

字体大小

设置为50px，因此半径为25px可能可以做到这一点，但您必须使用它）添加到

。共享：悬停

元素

…当然，这在不支持边框半径的浏览器中不起作用：或者，您可以使用

边框半径：50%

：）甚至更好。谢谢，@TerryThanks！看到我下面的评论，有什么想法吗？谢谢！我实现了这一点，但它仍然显示了红色圆圈周围的白色边缘。。。尝试使用

背景大小：25px 25px

但没有任何效果。有什么想法吗？也许你可以在

上使用
背景图像
（一个白色圆圈，宽度与正确尺寸一致）。共享一个：悬停

border-radius: 50px;