title: Bootstrap accordion with arrows
body: <p>I have a simple question regarding the Bootstrap accordion.</p>
  <p>I created an accordion which is clickable on the header to expand. This works well but my problem is that the arrows are not showing in the header.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.panel-heading [data-toggle="collapse"]:after {
    font-family: 'Glyphicons Halflings';
    content: "\e072";
    /* "play" icon */
    float: right;
    color: #b0c5d8;
    font-size: 18px;
    line-height: 22px;
    /* rotate "play" icon from &gt; (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 &gt; (right arrow) to ^ (up arrow) */
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;!-- Accordion START --&gt;
  &lt;div class="panel-group" id="accordion"&gt;
    &lt;div class="panel panel-default"&gt;
      &lt;div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne"&gt;
        &lt;h4 class="panel-title"&gt;Test1&lt;/h4&gt;
  
      &lt;/div&gt;
      &lt;div id="collapseOne" class="panel-collapse collapse"&gt;
        &lt;div class="panel-body"&gt;
          &lt;p&gt;sadfsadfsdaf sadf&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="panel panel-default"&gt;
      &lt;div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" data-target="#collapseTwo"&gt;
        &lt;h4 class="panel-title"&gt;Test2&lt;/h4&gt;
  
      &lt;/div&gt;
      &lt;div id="collapseTwo" class="panel-collapse collapse"&gt;
        &lt;div class="panel-body"&gt;
          &lt;p&gt;
            Bla bla bla
          &lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- Accordion END --&gt;</code></pre>
  </div>
  </div>
  </p>