title: Animating Bootstrap glyphicons
body: <p>I am using the bootstrap <code>glyphicon-triangle-left</code> and <code>glyphicon-triangle-bottom</code> glyphicons in a bootstrap accordion. When you open up a div it shows the <code>bottom</code> one and when you close it, it shows the <code>left</code> one.</p>
  
  <p>When the icons switch classes it looks a little stupid so I want to create a transition maybe make the icon rotate or fade out/in.
  But I am not sure how I can do this since I toggle between classes via jQuery like so:</p>
  
  <pre><code>function toggleChevron(e) {
      jQuery(e.target)
          .prev('.panel-heading')
          .find("i.indicator")
          .toggleClass('glyphicon-triangle-bottom glyphicon-triangle-left');
      }
  </code></pre>
  
  <p>I am not sure how I can do this because it uses the classes from the bootstrap accordion etc.</p>
  
  <p>I've tried doing something like this in my css file but it's not really doing what I want it to do :p</p>
  
  <pre><code>.glyphicon-triangle-bottom{
      opacity: 0;
      transition: opacity 1s;
  }
  
  .glyphicon-triangle-left{
      opacity: 1;
      transition: opacity 1s;
  }
  </code></pre>
  
  <p>Anyone had any idea how I can make the icons transition?
  Many thanks in advance!!</p>
  
  <p>EDIT: I customized this code a bit but this a good representation of what my accordion looks like: <a href="http://jsfiddle.net/zessx/r6eaw/12/" rel="noreferrer">http://jsfiddle.net/zessx/r6eaw/12/</a></p>