FontAwesome 3.2.1 隐藏锚文本值

Question

如何使用 Font Awesome 3.2.1 隐藏文本值并只显示图标？菜单选项需要有一个值。这是我拥有的：

<a href="#" class="icon icon-facebook-sign">Facebook</a>

我尝试了文本缩进，但只是隐藏了徽标而不是奇怪的文本。

Answer 1

与 Glyphicons 类似（在 Bootstrap 中使用），您可以在 a 标签内使用 span 元素：

<a href="#" title="Facebook"><span class="icon icon-facebook-sign"></span></a>

根据建议，我已经为屏幕 reader 添加了 title 属性。只要 a 标签不包含任何文本，屏幕 reader 就应该使用它。

Answer 2

可以用color:transparent属性，非常有用。

文本缩进也应该有效。 CSS 属性值以 display: inline-block 或 display: block 为锚点。

另一种解决方案是，您可以将文本放在 span 标记中并给出 span display:none;

Answer 3

<a href="https://www.facebook.com" title="Facebook"><i class="fa fa-facebook"></i> <span style="display:none;">Facebook</span></a>

这是 FontAwesome 图标的标准用法，应该可以解决您的问题。

Answer 4

<a href="#" class="icon icon-facebook-sign"><span class="hidden-xs">Facebook</span></a>

这里如果使用Bootstrap，可以使用hidden-lg,hidden-md 类.

FontAwesome 3.2.1 hiding anchor text values