输入提交按钮中的字体真棒图标和文本？答案

【问题标题】：Font awesome icon and text in input submit button?输入提交按钮中的字体真棒图标和文本？
【发布时间】：2015-04-01 18:35:43
【问题描述】：

我有类似here 的问题，我想在我的提交按钮和文本中放置一个很棒的字体图标，它看起来像这样：http://prntscr.com/608exx

我输入提交值的内容是立即购买&nbsp;&#xf07a;

图标是可见的，因为我在输入字段font-family: FontAwesome; 上设置了我的问题是，如何在按钮标准字体系列中设置我的文本？

【问题讨论】：

标签： html fonts submit

【解决方案1】：

试试

<button type="submit" class="btn btn-default">
                    <i class="fa fa-shopping-cart"></i> Buy Now
                </button>

【讨论】：

【解决方案2】：

为了在保留 <input> 元素的同时执行此操作，您必须将 Font Awesome 字形放在 <input> 之外，然后简单地将其放在顶部。

<span><i class="fas fa-shopping-cart glyph"></i></span>
<input type="button" class="button" value="Basket" />

然后只需添加一些 CSS 即可使整个按钮可点击。

.glyph{
    position: relative;
    left: 35px;
    pointer-events: none; //this makes the glyph clickable as part of the input
}

.button{
    width: 100px;
    height: 100px;
    padding-left: 20px;
}

JSFiddle

【讨论】：

【解决方案3】：

仅通过 CSS 即可轻松更改它。只需要拾取所有类型的标签属性即可。

例如：

对于按钮：输入、[type="button"]、[type="reset"]、[type="submit"] 对于文本：输入，[type="text"] 等等……

input, [type="button"], [type="reset"], [type="submit"] {
    -webkit-appearance: button;
    background-color: #EF2B76;
    padding-left: 2rem;
    padding-right: 2rem;
    cursor: pointer;
    color: white;
}

input, [type="text"] {
    background-color: white;
    padding-left: 2rem;
    padding-right: 2rem;
    cursor: pointer;
    color: white;
}

【讨论】：