title: Changing button icon upon onclick when using javascript/bootstrap
body: <p>I have complete jsfiddle sample <a href="http://jsfiddle.net/snijsure/usg8z/3/" rel="nofollow">http://jsfiddle.net/snijsure/usg8z/3/</a></p>
  
  <p>Basically I have javascript function as shown below</p>
  
  <pre><code>function playButtonPress() {
  
      if (play == false) {
          $("#playbutton").removeClass("icon-play").addClass("icon-stop").button('refresh');
  
          console.log("playButton pressed play was false show pause button");
          play = true;
      } else {
          $("#playbutton").removeClass("icon-pause").addClass("icon-play").button('refresh');
          console.log("playButton pressed play was true show play button");
          play = false;
      }
  }
  </code></pre>
  
  <p>I want to toggle a button icon between 'play' and 'pause'. i.e. if user was playing some contents button should be pause and if user was not playing content it should be 'play'.</p>
  
  <p>It appears that I have hooked all the javascript function correctly, but can't seem to figure out how to change icon class of button from icon-play &amp; icon-pause. </p>
  
  <p>How does one change icon associated with a button programmatically? I also see different behavior - in chrome the icon does change but the size is really tiny, whereas in Firefox icon doesn't change.</p>
  
  <p>Or is there any better way to do this?</p>