2

我正在拼命尝试向我的网站添加一些图标，但无法正确显示它们。我想要的只是一个包含图像并在线显示它们的容器。然后我想在该容器和图像之间添加一些填充，就是这样。

看这里我的方法。如果有人可以帮助我并更正我的代码以使其真正起作用，我会非常高兴。

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

注意：此代码对我不起作用。

4

3 回答 3

3

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

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 以匹配我的小提琴。

于 2013-03-26T19:29:08.870 回答
1

当您在 CSS 中添加图像时，您应该添加 atleastHeight或，最好同时添加两者，当您使用标签width添加图像时可以忽略（不一定） 。img

要在使用div时加入内联，请添加float:left到.icons类

 .icons {
  margin-left:30px;
  float:left;
  width:50px;
  height:50px;
  }

您也可以使用答案 by Kris Hollenbeck，在这种情况下，您也必须重写 HTML 代码，这是非常受欢迎的。

于 2013-03-26T19:33:36.063 回答
-3

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

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

于 2013-03-26T20:44:35.030 回答