I stumbled upon a great example of adding arrows to the Bootstrap accordion on CodePen. Check it out: https://codepen.io/tmg/pen/PQVBGB HTML:
<div class="container">
<div id="accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<i class="fa" aria-hidden="true"></i>
Collapsible Group Item #1
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
</div>
</div>
</div>
</div>
</div>
CSS:
[data-toggle="collapse"] .fa::before {
content: "\f139";
}
[data-toggle="collapse"].collapsed .fa::before{
content: "\f13a";
}
Questioning why the arrow icon disappears completely if the ::before modifiers are removed from the CSS. Shouldn't the content change regardless of its position? Also curious why the ::after doesn't appear after the text "collapsible group item #1" in the code above.
Your input is greatly appreciated!