Bootstrap 4 Collapse show state with Font Awesome icon

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

To extend this further - now using Bootstrap 4 Beta if it makes a difference:

This won't work when the initial state is collapsed - the icon will be reversed. Clicking the button through a cycle will fix it - but it'd be nice to have it right to begin with. The secret: add

class="collapsed"

to the toggling link(s). An example with a clickable text heading as well as the icon:

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

I also find the plus/minus symbols more intuitive - with arrows, I'm never quite sure if it means "current status is opened/closed" or "press this to open/close". Based on tree views, among others, I'm used to "+" means "closed/click to open", and "-" means "open/click to close". So while not directly part of the question I'll leave this for others to find (full credit to @tmg above for format - I just plugged in the "correct" characters):

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

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