结合字体图标和图像替换答案

【问题标题】：Combining font icon and Image Replacement结合字体图标和图像替换
【发布时间】：2013-12-04 14:29:09
【问题描述】：

我的 HTML 是这样的：

<li><a href="fbpage" class="icon-facebook">Facebook</a></li>

我正在使用 fontello 图标字体系统，但我似乎无法弄清楚如何让 Facebook 一词消失而图标仍然存在！生成的内容如下所示：

<li><a href="fbpage" class="icon-facebook">:before "Facebook"</a></li>

谢谢

（注意：我知道我可以在文本中添加一个跨度并切换它，但我认为可能有一种纯粹的 CSS 方式来做到这一点？）

【问题讨论】：

我确信这在网络上的某个地方有解释，但我似乎无法将手指放在教程上。我要么得到文本缩进解决方案，要么得到额外的标记（如跨度标签）。
这是什么:before "Facebook"°?°
这就是您在 WebKit 检查器（Chrome 上的“开发人员工具”）中查看 DOM 时看到的内容。这与源代码不同，因为它显示了生成的内容和操作。
明白了，谢谢，我保证我会比 FBug 更频繁地使用 Ch 的 DT。

标签： css image-replacement icon-fonts

【解决方案1】：

这是一种方式

.icon-facebook {
    text-indent: -9999px;                 /* sends the text off-screen */
    background-image: url(/the_img.png);  /* shows image */
    height: 100px;                        /* be sure to set height & width */
    width: 600px;
    white-space: nowrap;            /* because only the first line is indented */
}

.icon-facebook {
    outline: none;  /* prevents dotted line when link is active */
}

还有另一个。我发现这个问题在这里得到了回答： Hide text using css

【讨论】：

谢谢，但没有背景图片。 Fontello 字体系统将矢量图稿转换为字体。然后，您可以通过 :before 伪选择器向 html 添加字符。我的问题旨在找出是否可以使用纯 css 来定位仅与生成的 CSS“文本”（或者更确切地说，是文本的图标）分开的文本。在此处阅读更多信息：fontello.com
不要使用文本缩进：-9999px；这对 SEO 来说太可怕了。当他们抓住你时，你会受到惩罚。