Hi all,

I've been trying to figure out how customize the 'Add to Cart' button on the product pages to make them more attractively clickable and would like to add an icon to the 'Add to Cart' input field from the Font Awesome Icon set.

I'm a php noob who has figured out a bit of the syntax, but now I'm stumped.

I'm using CSS buttons, and I've managed to insert a shopping cart icon by trial and error that currently appears before the quantity form field, but ideally I'd rather insert it into the 'Add to Cart' button, or alternatively add another call-to-action icon into that button from the Font Awesome set.

Font Awesome uses styled <i> tags to insert their font icons into a page, so what I need to do is insert an <i> tag into the add to cart input field, or just before it.

In the tpl_product_info_display.php this is the code I've managed to tweek it to get an icon to display just before the Quantity box:

Code:
              // show the quantity box
              $the_button = '<span class="info-text">' . PRODUCTS_ORDER_QTY_TEXT . '</span>&nbsp;&nbsp;' . '<input type="text" name="cart_quantity" value="' . (zen_get_buy_now_qty($_GET['products_id'])) . '" maxlength="6" size="2" class="input-mini" />&nbsp;&nbsp;' . zen_get_products_quantity_min_units_display((int)$_GET['products_id']) . '' . zen_draw_hidden_field('products_id', (int)$_GET['products_id']).'<i class="fa fa-shopping-cart fa-2x pull-left"></i>'. '<input class="button button-large" type="submit" value="' . BUTTON_IN_CART_ALT . '" />';
            }
    $display_button = zen_get_buy_now_button($_GET['products_id'], $the_button);

I need to somehow insert the <i class="fa fa-shopping-cart fa-2x pull-left"></i> into the 'Add to Cart' input field in order to get it to look similar to the large green "Font Awesome Version 4.0.3" button on this Font Awesome Example page http://fortawesome.github.io/Font-Awesome/examples/ and I'm stumped as to how to go about doing so.