Edit in JSFiddle

<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
  <h1 class="h2">Bootstrap Studio (BS4) Accordion with Icon & BG Header Color</h1>
  <h2 class="h5">
    Bootstrap Studio test of concept using Bootstrap 4. Give Accordion component header section a background color and icon. Make the whole header section clickable. Header section changes color and icon when clicked.
  </h2>
  <div role="tablist" id="accordion-1">
    <div class="card">
      <div class="card-header" role="tab">
        <h3 class="mb-0 h5"><a data-toggle="collapse" aria-expanded="true" aria-controls="accordion-1 .item-1" href="div#accordion-1 .item-1">Accordion Item</a></h3>
      </div>
      <div class="collapse show item-1" role="tabpanel" data-parent="#accordion-1">
        <div class="card-body">
          <p class="card-text">Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header" role="tab">
        <h3 class="mb-0 h5"><a data-toggle="collapse" aria-expanded="false" aria-controls="accordion-1 .item-2" href="div#accordion-1 .item-2">Accordion Item</a></h3>
      </div>
      <div class="collapse item-2" role="tabpanel" data-parent="#accordion-1">
        <div class="card-body">
          <p class="card-text">Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header" role="tab">
        <h3 class="mb-0 h5"><a data-toggle="collapse" aria-expanded="false" aria-controls="accordion-1 .item-3" href="div#accordion-1 .item-3">Accordion Item</a></h3>
      </div>
      <div class="collapse item-3" role="tabpanel" data-parent="#accordion-1">
        <div class="card-body">
          <p class="card-text">Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p>
        </div>
      </div>
    </div>
  </div>
</div>

.card-header {
  padding: 0;
  a {
    display: block;
    padding: .75rem 1.25rem;
    color: #000;
    &:before {
      display: inline-block;
      font: normal normal normal 14px/1 FontAwesome;
      font-size: inherit;
      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      float: right;
    }
    &[aria-expanded=false]:before {
      content: "\f078";
    }
    &[aria-expanded=true] {
      background-color: #20b2aa;
      &:before {
        content: "\f077";
      }
    }
  }
}