I'm currently working with a bootstrap 4 accordion and I have been attempting to include an additional icon alongside the default arrow up/down icon. Although I tried nesting both icons inside a row, I still can't seem to figure out how to align them inline.
Here is what I have experimented with so far.
<div class="accordion" id="accordionExample"><div class="card mb-3">
<div class="card-header" id="heading-1">
<h5 class="mb-0 card-header-title">
<a class="btn btn-link text-left collapsed" role="button" data-toggle="collapse" data-target="#collapse-1" aria-expanded="false" aria-controls="collapse-1">
Item 3
</a>
</h5>
</div>
<div id="collapse-1" class="collapse" data-parent="#accordionExample" aria-labelledby="heading-1">
<div class="card-body">
Description 1
</div>
</div>
</div>
</div>
CSS:
.card-header-title > a {`
display: block;
position: relative;
}
.card-header-title > a:hover {
cursor: pointer;
}
.card-header-title > a:after {
content: "\f078"; /* fa-chevron-down */
font-family: "Font Awesome 5 Free";
font-weight: 900;
position: absolute;
right: 0;
}
.card-header-title > a[aria-expanded="true"]:after {
content: "\f077"; /* fa-chevron-up */
}
Result: https://i.sstatic.net/IGAeE.png
This is my desired outcome: https://i.sstatic.net/uWu0s.png