Bootstrap 4 Collapse show state with Font Awesome icon

Question

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

Answer 1

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:

    

        
            Card Header
        
    
    

        
            
            Expand/Collapse Card 1
        
    


    

        Here is some wonderful content that you can't see...until expanded!
    

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