将图标添加到输入提交

Question

如何在输入提交的开头添加图标？

我的提交在这里：

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

这是我想要加上前缀的图片：

目前的情况：

Answer 1

使用按钮替换您的提交输入：

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

或者将图标定义为提交输入的背景：

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

Answer 2

好的，所以我觉得你应该只通过CSS做。这是代码：

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

<强>解释

• 在背景中将图像和颜色加在一起
• 将背景位置设置为5px或左右并垂直居中。
• 将背景重复设置为不重复。
• 根据要求添加其他 CSS 。

祝你好运!!