DRY way to replace button text with icon without changing button size

Question

Throughout my web app I have various submit buttons. I am able to disable them after a user submits to prevent multiple post requests and submissions to the server. I also replace the text of the button with a font awesome spinner icon. "Approve" becomes <i class="fa fa-spinner" aria-hidden="true"></i>.

<a class="btn btn-success" id="approve-button" rel="nofollow" data-method="post" href="/approve?id=40">
  Approve
</a>

#approve-button {
  height: 34px;
  width: 138px;
}

Since the text and font-size is dictating the size of the buttons, when I replace the text with the icon, the button shrinks. The only way I see the prevent this is to manually set the button height and width. But I have to do this for all buttons.

Is there a simpler way where I don't have to manually set the height and width of all buttons?

Answer 1

Setting the min-width & min-height or by grabbing the existing width and height, and applying an inline-style at the same time you swap the spinner.

OR

If you want to be strictly CSS based, you can set two span elements within the button: one for the spinner, and the button label. Thus, position absolute the span spinner to sit above the button, and when your spinner is active (display: block), and make the span label hidden (visibility: hidden) -- this will keep the proportion of the button.

To demonstrate: forked off of TheEarlyMan's answer: http://codepen.io/brh55/pen/yJNbmP