引导与字体真棒图标

问题描述：

我有一个引导4倒塌如下4折叠显示状态......引导与字体真棒图标

<a data-toggle="collapse" href="#collapseNEWS" aria-expanded="true" aria-controls="collapseNEWS"><i class="fa fa-chevron-circle-up" aria-hidden="true"></i></a> 
<div class="row collapse in" id="collapseNEWS">Content</div>

此自动显示，除非单击字体真棒图标的内容。我在初始加载时显示fa-chevron-circle-up图标。

一旦图标被点击，内容关闭，我想展现FA-V形圈下降图标来代替。我将如何实现这一目标？

我已经看过了阿尔法文档： http://v4-alpha.getbootstrap.com/components/collapse/

...但我不清楚我是怎么建立的状态展现要么...

<i class="indicator fa fa-chevron-circle-up" aria-hidden="true"></i>

或...

<i class="indicator fa fa-chevron-circle-down" aria-hidden="true"></i>

谢谢 NJ

答

您可以使用自定义的CSS（内容属性）添加字体真棒图标：

只需使用<i class="fa">和

[data-toggle="collapse"] .fa:before { 
    content: "\f139"; 
} 

[data-toggle="collapse"].collapsed .fa:before { 
    content: "\f13a"; 
}

实例codepen

答

扩大这进一步 - 现在使用的引导4测试版，如果它的确与众不同：

时的初始状态是折叠这是行不通的 - 的图标将被扭转。通过一个循环点击按钮可以解决它 - 但是，一开始就很合适。秘密：添加

class="collapsed"

到切换链接（s）。有一个可点击的文本标题以及图标的一个例子：

<div class="card-header d-flex justify-content-between" id="headingCollapse1"> 
    <div> 
     <a class="collapsed" data-toggle="collapse" href="#collapse1" aria-expanded="false" aria-controls="collapse1"> 
      Card Header 
     </a> 
    </div> 
    <div> 
     <a data-toggle="collapse" class="collapsed btn btn-default btn-xs text-right" href="#collapse1" aria-label="Expand/Collapse Card 1" aria-expanded="false" role="button"> 
      <i class="fa" aria-hidden="true"></i> 
      <span class="sr-only">Expand/Collapse Card 1</span> 
     </a> 
    </div> 
</div> 
<div id="collapse1" class="collapse" aria-labelledby="headingCollapse1"> 
    <div class="card-body"> 
     Here is some wonderful content that you can't see...until expanded! 
    </div> 
</div>

我也发现了正/负符号更直观 - 与箭，我从来没有肯定是否就意味着“当前状态打开/关闭“或”按此打开/关闭“。基于树视图，我习惯于“+”表示“关闭/点击打开”，“ - ”表示“打开/单击关闭”。因此，尽管这个问题没有直接的部分，我会离开这个给别人找到（完全学分制以上@tmg的格式 - 我只是在“正确”的字符插入）：

[data-toggle="collapse"] i:before{ 
    content: "\f146"; 
} 

[data-toggle="collapse"].collapsed i:before{ 
    content: "\f0fe"; 
}

答

您可以添加到toggleClass()onclick事件<a></a>元素和附加类fa-rotate-180元素Font Awesome icon。

fa-rotate-180 - Font Awesome中的标准类。

<a href='' onclick="$('#collapsed-chevron').toggleClass('fa-rotate-180')"> 
    <i class="fa fa-chevron-circle-up" id="collapsed-chevron"></i> 
    Link Text 
</a>

引导与字体真棒图标

相关推荐