似乎没有类的输入类型'提交'在字体-真棒。是否有可能使用一些类从字体awesome按钮输入?我已经在我的应用程序中为所有按钮添加了图标(实际上与twitter-bootstrap中的类“btn”链接)，但不能在“输入类型提交”上添加图标。
或者，如何使用这段代码:
input#image-button{
background: #ccc url('icon.png') no-repeat top left;
padding-left: 16px;
height: 16px;
}
html:
<input type="submit" id="image-button">Text</input>
(这是我从HTML中学到的:如何制作一个文本+图像的提交按钮?)
当前回答
你可以使用字体awesome utf备忘单
<input type="submit" class="btn btn-success" value=" Login"/>
这里是小抄的链接 http://fortawesome.github.io/Font-Awesome/cheatsheet/
其他回答
HTML
由于<input>元素只显示value属性的值，我们必须只操作它:
<input type="submit" class="btn fa-input" value=" Input">
我使用实体，它对应于U+F043，字体Awesome的“tint”符号。
CSS
然后我们必须使用字体来设置它的样式:
.fa-input {
font-family: FontAwesome, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
这将给我们着色符号在字体Awesome和其他文本在适当的字体。
然而，这个控件不是像素完美的，所以你可能不得不自己调整它。
从技术上讲，不可能让:before和:after伪元素作用于输入元素
W3C:
12.1:before和:after伪元素 类型指定生成内容的样式和位置 :伪元素之前和之后。正如它们的名字所示 :前:后伪元素指定内容的位置 在元素的文档树内容之前和之后。“内容” 属性与这些伪元素一起指定是什么 插入。
所以我有一个项目，我有提交按钮在输入标签的形式，由于某种原因，其他开发人员限制我使用<button>标签，而不是通常的输入提交按钮，所以我想出了另一个解决方案，包装按钮在一个跨度设置的位置:相对;然后绝对定位图标使用:后伪。
注意:演示小提琴使用fontaweesome 3.2.1的内容代码 您可能需要相应地更改content属性的值。
HTML
<span><input type="submit" value="Send" class="btn btn-default" /></span>
CSS
input[type="submit"] {
margin: 10px;
padding-right: 30px;
}
span {
position: relative;
}
span:after {
font-family: FontAwesome;
content: "\f004"; /* Value may need to be changed in newer version of font awesome*/
font-size: 13px;
position: absolute;
right: 20px;
top: 1px;
pointer-events: none;
}
Demo
现在这里的一切都不言自明了，关于一个属性，即pointer-events: none;，我使用这个属性是因为在伪生成内容后悬停在:上，你的按钮不会单击，因此使用none值将强制单击操作通过该内容。
来自Mozilla开发者网络:
除了表示该元素不是鼠标的目标 事件，值none指示鼠标事件“通过” 元素，并将目标改为该元素“下面”的内容。
悬停心形字体/图标演示，看看如果你不使用指针事件会发生什么:none;
将实际符号复制到提交值属性中
<input type="submit" value="Send ➢ ➔ " class="btn btn-default" />
使用多个提交，当您需要选择提交的值时，可以很容易地做到这一点。只需在表单中创建一个隐藏字段，并根据单击的按钮更改其值。例如，在表单中，你有:
<input type="hidden" id="Clicked" name="Clicked" value="" />
<button type="submit" class="btn btn-success ClickCheck" id="Create"> <i class="fa fa-file-pdf-o"> Create Bill</i></button>
<button type="submit" class="btn btn-success ClickCheck" id="Reset"> <i class="fa fa-times"> Reset</i></button>
<button type="submit" class="btn btn-success ClickCheck" id="StoreData"> <i class="fa fa-archive"> Save</i></button>
使用jQuery:
<script type="text/javascript">
$(document).ready(function()
{
$('.ClickCheck').click(function()
{
var ButtonID = $(this).attr('id');
$('#Clicked').val(ButtonID);
});
});
</script>
然后，您可以在“clicked”post变量中检索所单击按钮的值
使用button type="submit"而不是input
<button type="submit" class="btn btn-success">
<i class="fa fa-arrow-circle-right fa-lg"></i> Next
</button>
为字体Awesome 3.2.0使用
<button type="submit" class="btn btn-success">
<i class="icon-circle-arrow-right icon-large"></i> Next
</button>
