Bootstrap 4使用Font Awesome图标折叠显示状态

Question

我有一个Bootstrap 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-chevron-circle-down图标.我怎么做到这一点？

我查看了alpha文档: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>

谢谢新泽西州

Answer 1

您可以使用自定义CSS(内容属性)添加font-awesome图标:

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

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

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

codepen中的示例

Answer 2

为了进一步扩展 - 现在使用Bootstrap 4 Beta,如果它有所不同:

折叠初始状态时,这将不起作用 - 图标将反转.在循环中单击按钮将修复它 - 但是开始使用它是很好的.秘诀:补充一下

class="collapsed"

到切换链接.可点击文本标题以及图标的示例:

<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";
}

Answer 3

没有 FontAwesome unicode 和 JavaScript 的解决方案：

1. 在您当前只有一个图标的地方包括这两个图标
2. 使用CSS在内容展开时隐藏向上箭头元素，并在内容折叠时隐藏向下箭头元素

例子：

HTML：

<a data-toggle="collapse" href="#collapseNEWS" aria-expanded="true" aria-controls="collapseNEWS">
    <i class="fa fa-chevron-circle-up"></i>
    <i class="fa fa-chevron-circle-down"></i>
</a>

CSS：

[aria-expanded="true"] .fa-chevron-circle-up, 
[aria-expanded="false"] .fa-chevron-circle-down {
    display:none;
}

Answer 4

您可以添加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>

Answer 5

在 Fontawesome 5.5 中使用 Rails 和 Bootstrap 4

这对我来说不太奏效，它在重新关闭时翻转它。我不得不添加另一个状态控件：

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

[aria-expanded="true"] .fas:before {  
  content: "\f056";
}

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