0

在我的网站http://www.stefaanoyen.be（左栏）的页脚中，我有一些社交媒体图标，它们是图标字体。悬停时，我想要红色的圆圈和白色的图标。红色圆圈有效，但它们后面有一个白色方块。如何将白色限制为图标/圆圈的形状？

这是我的 HTLM：

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

这是我的 CSS：

.share a {
color: #ececec;
text-decoration: none;
font: 50px 'socialicoregular', Helvetica, sans-serif;
}

.share:hover {
cursor: pointer;
}

.share a:hover {
color: #B61618;
text-decoration: none;
font: 50px 'socialicoregular', Helvetica, sans-serif;
background-color: #fff;
}

非常感谢你的帮助！

斯特凡

4

2 回答 2

1

这个没有简单的解决方案，因为您只依赖一种字体。您可以尝试向元素添加一个border-radius（您font-size的设置为 50px，因此 25px 的半径可能会这样做，但您将不得不使用它） 。.share a:hover

于 2013-03-27T14:03:07.143 回答
0

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

由于您的图标都是圆形的，因此您可以使用以下小技巧：

border-radius: 50px;

这只是一个猜测的数字。这并不意味着它是正确的。只需找到与您的图标高度/宽度相匹配的那个。（您可能还需要使用 line-height 以确保您的字体是，或者至少看起来是垂直居中的。）

于 2013-03-27T14:02:08.747 回答