輸入提交按鈕中的字體真棒圖標和文本？

Question

我有一個類似的問題在這里，我想地方的字體真棒圖標進入我的提交按鈕，也是一個文本，它看起來如此： http://prntscr.com/608exx

我的輸入提交值的內容是立即購買 

該圖標是可見的，因為我在輸入字段font-family: FontAwesome; 我的問題是，如何在按鈕標准字體系列中設置文本？

Answer 1

嘗試

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

Answer 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

Answer 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;
}