Adding an icon to an input submit

Question

How can I add an icon to the beginning of my input submit?

My submit is in here:

<div class="prodbox" style="height: 55px;">
    <div class="pricetag">
        <input type="submit"  
               class="productcart"
               alt="Add to Cart"
               value="ADD TO CART"/> 
    </div>
</div>

Here's the image I would like to prefix with:

What it looks like currently:

Answer 1

OK, so this I think you should do via CSS only. here is the code:

.pricetag input[type="submit"]{
    background: url(../images/icon-plus.png) 5px center no-repeat #F60;
    color:#FFF;
    padding: 5px;
}

Explanation:

• In Background add the image and color both together
• Set the background position 5px or something to left and center vertically.
• Set the background-repeation to no-repeat.
• Add other CSS as per requirement.

Good Luck!!

Answer 2

Replace your submit input with a button:

<button class="productcart" name="Add to Cart">
    <img src="http://www.amleo.com/images/art/glyphicons_190_circle_plus.png">
    ADD TO CART
</button>

Or define the icon as background of the submit input:

.productcart {
    padding-left: 30px;
    background: url('http://www.amleo.com/images/art/glyphicons_190_circle_plus.png') no-repeat;
}