title: Stop button from changing size when changing its contents
body: <p>I am trying to get my submit button to switch to a Font Awesome spinner when it is clicked. However, when I do, the button becomes really small, which does not look very pleasant. How can I fix prevent the button from getting smaller?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function refreshreplace() {
    $("#CMSub").html('&lt;i class="fa fa-refresh fa-spin"&gt;&lt;/i&gt;');
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/&gt;
  &lt;link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="modal-dialog text-muted"&gt;
    &lt;div class="modal-content"&gt;
      &lt;div class="modal-header"&gt;
        &lt;button class="close" data-dismiss="modal" type="button"&gt;&lt;span&gt;&amp;times;&lt;/span&gt;
        &lt;/button&gt;
  
        &lt;h4 class="modal-title" id="myModalLabel"&gt;Contact me&lt;/h4&gt;
      &lt;/div&gt;
  
      &lt;div class="modal-body"&gt;
        &lt;p&gt;Your name:&lt;/p&gt;
        &lt;input type="username" id="CMU" name="username"&gt;
        &lt;br&gt;
        &lt;br&gt;
        &lt;p&gt;Your email:&lt;/p&gt;
        &lt;input type="email" id="CME" name="email"&gt;
        &lt;br&gt;
        &lt;br&gt;
        &lt;p&gt;Your comment/message&lt;/p&gt;
        &lt;input type="comment" id="CMC" name="comment"&gt;
        &lt;br&gt;
        &lt;br&gt;
        &lt;div class="text-centered"&gt;
          &lt;button class="btn btn-sm btn-success" id="CMSub" onclick="refreshreplace()"&gt;Submit&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="modal-footer"&gt;
        &lt;button class="btn btn-success" data-dismiss="modal" type="button" onclick="alert('You clicked the tick');"&gt;&lt;span class="glyphicon glyphicon-ok"&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;button class="btn btn-danger" data-dismiss="modal" type="button" onclick="alert('You have clicked exit');"&gt;&lt;span class="glyphicon glyphicon-remove"&gt;&lt;/span&gt;
        &lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://codepen.io/Riggster/pen/XbOdgR" rel="nofollow">View on Codepen</a></p>