Question

我见过一些我们给李的网站，图片显示出来了：

实施例。 <li>skype</li>

只需给出这个skype图标就可以了。这真是太神奇了。这怎么可能？我进入了Firebug并且没有在CSS中找到任何background。

有人可以告诉你这个服务的目的是什么，以及为什么有人会这样做？

修改：举个例子，请访问此网站：

http://www.burakson.com/

并看到此HTML：<a class="s1 btip" target="_blank" href="http://www.facebook.com/boureaque">Facebook</a>

HTML如何显示facebook图标？

Answer 1

您之后在问题中指定的网站没有使用:before或网络字体，这只是简单的css：

.head-social ul li a {
    background: transparent url('../images/socials.png') no-repeat top left;
    height: 28px;
    width: 28px;
    display: block;
    text-indent: -9999px;
    outline: 0;
}

background行设置图标图片，text-indent: -9999px;行使文字内部不可见。

对于每个图标，都有这样的样式：

.head-social ul li a.s1 {
    background-position: 0 0;
}

.head-social ul li a.s2 {
    background-position: -30px 0;
}

覆盖每个图标元素的background-position。

进一步阅读：

如何在里面给出名字并显示图片？

1 个答案: