Question

我的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方式来做它？）

Answer 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

结合字体图标和图像替换

1 个答案: