Bootstrap 4折叠显示状态，带有“真棒字体"图标 [英] Bootstrap 4 Collapse show state with Font Awesome icon

问题描述

我有一个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>

谢谢 新泽西州

解决方案

您可以使用自定义CSS(内容属性)添加超棒的字体图标:

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

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

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

codepen

I have a single Bootstrap 4 collapse as follows...

<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>

This automatically displays the content unless the font awesome icon is clicked. I am displaying the fa-chevron-circle-up icon upon initial load.

Once the icon is clicked, the content closes and I'd like to show the fa-chevron-circle-down icon instead. How would I achieve this?

I've looked at the alpha documentation: http://v4-alpha.getbootstrap.com/components/collapse/

...but I'm not clear how I establish the state to show either...

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

or...

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

Thank you NJ

解决方案

You can add the font-awesome icon with custom CSS (content property):

Just use <i class="fa"></i> and

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

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

Example in codepen

这篇关于Bootstrap 4折叠显示状态，带有“真棒字体"图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！