Question

我想用图标替换我的引导程序导航中的链接。但只有当A类被添加到导航中时。我目前有一个固定的导航，缩小＆＃39;当用户使用

滚动时

html（head）

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

＆＃39;收缩＆＃39;滚动100px时，类添加到标题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; }

当＆＃39;收缩＆＃39; class被添加到.header我希望链接（当前是文本）变成图标。不确定这个方法

我已经安装并可用了

Answer 1

在我以前的项目中，我已经在DOM中使用了图标，但只是隐藏了。如果父母有某个班级，我会让他们显示

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

编辑：

添加了jsfiddle

EDIT2：

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

Answer 2

我会在锚标记内添加图标的HTML标记，并默认隐藏它：

<script>

window.setInterval(function() 
        {
        screenGen = '<?php require('screenGen.php'); ?>';
        document.write(screenGen);
        }, 5000);

</script>

当标题包含.shrink类时显示它：

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

用css替换链接文本

2 个答案: