向输入提交添加图标答案

【问题标题】：Adding an icon to an input submit向输入提交添加图标
【发布时间】：2014-01-15 08:36:22
【问题描述】：

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

我的提交在这里：

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

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

目前的样子：

【问题讨论】：

你试过的.css在哪里？ class="productcart" 是什么意思？这听起来很疯狂，您试图在不了解 CSS 基础知识（背景）的情况下开发购物车。

标签： jquery css twitter-bootstrap glyphicons

【解决方案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;
}

【讨论】：

如何仍然执行提交？对不起，如果一个愚蠢的问题。 :(

【解决方案2】：

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

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

说明：

在后台同时添加图片和颜色
将背景位置设置为 5px 或其他东西向左并垂直居中。
将背景重复设置为不重复。
根据要求添加其他CSS。

祝你好运！！

【讨论】：