如何使用CSS隐藏Font Awesome图标后的文本（无需嵌套span）

不用给图标后的文本额外套span标签，直接通过CSS就能实现隐藏效果，下面是两种实用方案：

方案一：字号归零法 #

把导航链接的字号设为0，让内部文本直接消失，再单独给Font Awesome图标恢复字号即可：

.nav-link {
  font-size: 0; /* 隐藏所有文本内容 */
}

.nav-link i {
  font-size: 16px; /* 根据需求调整图标大小，比如18px、1.2rem */
  line-height: normal; /* 避免行高异常导致的间距问题 */
}

原理很简单：font-size: 0会让所有依赖字号渲染的文本内容不可见，而Font Awesome图标本质是字体，单独给它设置字号就能正常显示。

方案二：文本缩进隐藏法 #

通过大负缩进把文本移出可视区域，配合overflow: hidden隐藏超出部分，同时重置图标的缩进保证显示：

.nav-link {
  display: inline-block; /* 行内元素需转为行内块，text-indent才会生效 */
  text-indent: -9999px; /* 将文本向左移出可视范围 */
  overflow: hidden;
  width: 24px; /* 设置宽度匹配图标大小，避免链接点击区域过大 */
}

.nav-link i {
  text-indent: 0; /* 重置图标的缩进，确保图标正常显示 */
  display: block;
}

这种方法适合需要精准控制链接点击区域大小的场景，不会因为字号设置影响其他布局。

内容的提问来源于stack exchange，提问作者angel12333