Change icon class in "Add to cart" button

Question

I am using Drupal 7, Ubercart, and Bootstrap. The default Add to cart button looks like this:

<button id="edit-submit-270" class="node-add-to-cart btn btn-success form-submit" value="Add to cart" name="op" type="submit">
  <span class="icon glyphicon glyphicon-plus" aria-hidden="true"></span>
  Add to cart
</button>

How can I change the <span> class from glyphicon-plus to glyphicon-shopping-cart?

Answer 1

Simple Solution is achieving it with simple Jquery line

$('span.icon.glyphicon.glyphicon-plus').removeClass('glyphicon-plus').addClass('glyphicon-shopping-cart');

Answer 2

Give it another class in your template.php file, and CSS does the rest

/**
 * @param $variables
*/
function yourtheme_preprocess_button(&$variables) {
  $variables['element']['#attributes']['class'] = array();
  $variables['element']['#attributes']['class'][] = 'btn';
  if (stristr($variables['element']['#value'], 'Add to cart') !== FALSE) {
    $variables['element']['#attributes']['class'][] = 'btn-cart';
  }
}