Bootstrap 4 Collapse show state with Font Awesome icon

Question

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

Answer 1

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