Bootstrap Accordion With Arrows

I have a simple question regarding the Bootstrap accordion. I created an accordion which is clickable on the header to expand. This works well but my problem is that the arrows are

Solution 1:

Problem is in space between selectors:

.panel-heading[data-toggle="collapse"]:after
              ^-------// remove this space to make this selector work

Now you are selecting all elements having data-toggle attribute which are descendants of .panel-heading. It should be:

.panel-heading[data-toggle="collapse"]:after

.panel-heading {
  position: relative;
}
.panel-heading[data-toggle="collapse"]:after {
  font-family: 'Glyphicons Halflings';
  content: "\e072"; /* "play" icon */position: absolute;
  color: #b0c5d8;
  font-size: 18px;
  line-height: 22px;
  right: 20px;
  top: calc(50% - 10px);

  /* rotate "play" icon from > (right arrow) to down arrow */
  -webkit-transform: rotate(-90deg);
  -moz-transform:    rotate(-90deg);
  -ms-transform:     rotate(-90deg);
  -o-transform:      rotate(-90deg);
  transform:         rotate(-90deg);
}
.panel-heading[data-toggle="collapse"].collapsed:after {
  /* rotate "play" icon from > (right arrow) to ^ (up arrow) */
  -webkit-transform: rotate(90deg);
  -moz-transform:    rotate(90deg);
  -ms-transform:     rotate(90deg);
  -o-transform:      rotate(90deg);
  transform:         rotate(90deg);
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"rel="stylesheet"/><!-- Accordion START --><divclass="panel-group"id="accordion"><divclass="panel panel-default"><divclass="panel-heading accordion-toggle collapsed"data-toggle="collapse"data-parent="#accordion"data-target="#collapseOne"><h4class="panel-title">Test1</h4></div><divid="collapseOne"class="panel-collapse collapse"><divclass="panel-body"><p>sadfsadfsdaf sadf</p></div></div></div><divclass="panel panel-default"><divclass="panel-heading accordion-toggle collapsed"data-toggle="collapse"data-parent="#accordion"data-target="#collapseTwo"><h4class="panel-title">Test2</h4></div><divid="collapseTwo"class="panel-collapse collapse"><divclass="panel-body"><p>
Bla bla bla
</p></div></div></div></div><!-- Accordion END -->

Solution 2:

No fonts (icons) needed:

I come with a simple solution:

.card-link::after {
    content: "";
    border-bottom: 0;
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-left: .3em solid transparent;
}

.card-link[aria-expanded="true"]::after {
    content: "";
    border-top: 0;
    border-bottom: .3em solid;
}