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

我会为我的图标创建一个图像精灵。然后对于标记我会使用一个列表并将图标图像设置为背景图像到各自的锚标签...这样的东西......

<强> 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;
}

这是一个需要展示的内容：

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

编辑： 我更新了我的CSS以匹配我的小提琴。

Answer 2

当您在CSS中添加图片时，您应添加至少Height或width，最好添加两者，您可以在使用{{1}添加图片时忽略（不一定） } tag。

要使用img进行内联，请将div添加到float:left类

.icons

你也可以使用.icons { margin-left:30px; float:left; width:50px; height:50px; }的答案，在这种情况下你也必须重写HTML代码，这是非常优先的。

Answer 3

这是社交小部件演示http://www.tech-fans.com/p/socialbox.html

你可以从这里http://www.tech-fans.com/2013/03/socialbox.html

获得它

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

3 个答案: