输入提交按钮中的字体真棒图标和文本?
Font awesome icon and text in input submit button?
我有类似的问题 here , i want to place font awesome icon into my submit button and also a text, it looks so: http://prntscr.com/608exx
我输入提交值的内容是立即购买 
图标是可见的,因为我在输入字段上进行了设置font-family: FontAwesome;
我的问题是,如何在按钮标准字体系列中设置我的文本?
尝试
<button type="submit" class="btn btn-default">
<i class="fa fa-shopping-cart"></i> Buy Now
</button>
为了在保留 <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;
}
只需通过 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;
}
我有类似的问题 here , i want to place font awesome icon into my submit button and also a text, it looks so: http://prntscr.com/608exx
我输入提交值的内容是立即购买 
图标是可见的,因为我在输入字段上进行了设置font-family: FontAwesome;
我的问题是,如何在按钮标准字体系列中设置我的文本?
尝试
<button type="submit" class="btn btn-default">
<i class="fa fa-shopping-cart"></i> Buy Now
</button>
为了在保留 <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;
}
只需通过 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;
}