javascript - 通过CSS用图形替换链接文本

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

html（头）

 $(function(){
   var shrinkHeader = 100;
   $(window).scroll(function() {
var scroll = getCurrentScroll();
  if ( scroll >= shrinkHeader ) {
       $('header').addClass('shrink');
    }
    else {
        $('header').removeClass('shrink');
    }
 });

当滚动100px时，将“ shrink”类添加到标题div中。

的CSS

.navbar-custom .nav>li>a {
   font-size: 1.15em;
   font-weight: 400;
   etc...

header.shrink {
  min-height: 50px;
}

header.shrink .nav>li>a { line-height: 50px; }

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

我安装了fontawesome并且可以使用

最佳答案

在上一个项目中，我的图标已经在DOM中，但是只是隐藏了。如果父母有某堂课，我让他们展示

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

编辑：

添加了jsfiddle

编辑2：

更新了jsfiddle。您可以使用伪类添加字体真棒图标。您可以通过一些谷歌搜索轻松获得unicode