Bootstrap 4 使用 Font Awesome 图标折叠显示状态 [英] 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 {内容:f139"；}[data-toggle="collapse"].collapsed .fa:before {内容: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 使用 Font Awesome 图标折叠显示状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！