Html 输入提交按钮中的字体真棒图标和文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28284105/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Font awesome icon and text in input submit button?
提问by m_73
I have a similar problem like here, i want to place font awesome icon into my submit button and also a text, it looks so: http://prntscr.com/608exx
我有一个类似的问题在这里，我想地方的字体真棒图标进入我的提交按钮，也是一个文本，它看起来如此：http://prntscr.com/608exx
Content of my input submit value is Buy now 
我输入提交值的内容是立即购买 
The icon is visible because i set on input field font-family: FontAwesome;my question is, how can i set on my text inside the button standard font family?
该图标是可见的，因为我在输入字段上设置了font-family: FontAwesome;我的问题是，如何在按钮标准字体系列中设置我的文本？
回答by Society43
Try
尝试
<button type="submit" class="btn btn-default">
<i class="fa fa-shopping-cart"></i> Buy Now
</button>
回答by Christian Smith
In order to do this whilst retaining the <input>element, you must put the Font Awesome glyph outside of the <input>and then simply position it on top.
为了在保留<input>元素的同时做到这一点，您必须将 Font Awesome 字形放在 之外，<input>然后简单地将其放置在顶部。
<span><i class="fas fa-shopping-cart glyph"></i></span>
<input type="button" class="button" value="Basket" />
Then simply add some CSS to make the whole button clickable.
然后只需添加一些 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;
}
