在翱翔的象字体背景

时间:2013-03-27 13:52:55

标签: css background hover icon-fonts

在我的网站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;
}

非常感谢你的帮助!

斯特凡

2 个答案:

答案 0 :(得分:1)

这个没有简单的解决方案,因为你只依赖于字体。您可以尝试添加border-radius(您的font-size设置为50px,因此半径为25px可能会执行此操作,但您必须使用它)到.share a:hover元素。

答案 1 :(得分:0)

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

由于你的图标都是圆形的,所以这里有一个小技巧:

border-radius: 50px;

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