Javascript 通过css将链接文本替换为图形

我想用图标替换引导导航中的链接。但仅当类添加到导航时。我目前有一个固定的导航，当用户使用

html（标题）

滚动100px时，将“收缩”类添加到header div

css

当“收缩”类添加到.header时，我希望链接（当前为文本）变成图标。我不确定这个方法

---

在我以前的项目中，我已经安装并可用了图标，我的图标已经在DOM中，但只是隐藏了。我让他们显示，如果家长有一个特定的类

.nav>li>a>.fa { display: none; }
.shrink .nav.li.a.fa { display:block; }

编辑：

增加

编辑2：

---

更新。您可以使用伪类添加字体图标。您只需在谷歌上搜索一下，就可以轻松获得unicode。我会为锚定标记中的图标添加HTML标记，并在默认情况下将其隐藏：

header .nav > li > a > span.icon {
    display: none;
}

并在标头具有.shrink类时显示它：

header.shrink .nav > li > a > span.icon {
    display: block; (or inline)
}

---

这不会增加额外的间距或类似问题吗？我忘了提到我正在使用wordpressNo，display:none；你可以在文本上使用相同的技巧来切换它。例如：span.label{}似乎有效。总有一天我会想办法把它做成动画之类的。谢谢你的帮助问题是，我使用的是wordpress，所以我没有能力像你所显示的那样添加图标（在列表中），这会让事情变得有趣，让我来更新使用动态wordpress导航的fiddlewill。正如我提到的，我不能直接硬编码每个链接，你只需要知道你要针对哪些元素，它不需要你做任何html更改

header .nav > li > a > span.icon {
    display: none;
}

header.shrink .nav > li > a > span.icon {
    display: block; (or inline)
}