jquery - 如何在 li 中命名并显示图像？

Question

我看过一些我们给 li 的网站，并显示了图像：

前任。<li>skype</li>

只要给这个Skype图标就会出现。这真是太神奇了。这怎么可能？我进入 Firebug 并没有background在 CSS 中找到任何内容。

任何人都可以告诉建议这将服务于什么目的以及为什么有人会使用它？

编辑：例如，请参阅此网站：

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. https://developer.mozilla.org/en-US/docs/CSS/text-indent
2. https://www.google.com/search?q=CSS+sprite