html - 如何使用 HTML 和 CSS 在我的网站上显示社交图标？

Question

我拼命想在我的网站上添加一些图标，但无法让它们正常显示。我想要的只是一个包含图像并显示它们的容器。然后我想在该容器和图像之间添加一些填充，仅此而已。

请参阅此处我的方法。如果有人可以帮助我并更正我的代码以使其真正起作用，我将非常高兴。

在我的 HTML 文件中:

<div class="icons">
    <div class="email"><a href="mailto:example@hotmail.com" title="email"></a></div>
    <div class="twitter"><a href="http://www.twitter.com" title="twitter">twitter</a>    
</div>

在我的 CSS 中:

.icons {
    margin-left:30px;
}

.icons .email { background: url(../images/social/email.png) left top no-repeat; }
.icons .twitter { background: url(../images/social/twitter.png) left top no-repeat; }

注意:这段代码对我不起作用。

Answer 1

我会为我的图标创建一个图像 Sprite 。然后对于标记，我将使用一个列表并将图标图像设置为其各自 anchor 标记的背景图像。

像这样:

HTML

<ul>
<li><a href="" class="icon facebook">Facebook</a></li>
<li><a href="" class="icon twitter">Twitter</a></li>
<li><a href="" class="icon googleplus">Google Plus</a></li>
</ul>

CSS

ul li {
float:left;
display:block;
}

.icon {
width:25px;
height:25px;
display:block;
text-indent:-9999px;
background-image:url(http://tridentdesign.com/wp-content/uploads/2012/12/gemicon.jpg);
background-repeat:no-repeat;
}

.facebook {
background-position:-140px -115px;
}
.twitter {
background-position:-185px -115px;
}
.googleplus {
background-position:-140px -265px;
}

这里有一个 fiddle 来演示:

http://jsfiddle.net/Z8zkK/2/