使用按钮type=“提交”代替输入

<button type="submit" class="btn btn-success">
    <i class="fa fa-arrow-circle-right fa-lg"></i> Next
</button>

用于Font Awesome 3.2.0

<button type="submit" class="btn btn-success">
    <i class="icon-circle-arrow-right icon-large"></i> Next
</button>

HTML格式

因为<input>元素只显示value属性的值，所以我们只能操作它：

<input type="submit" class="btn fa-input" value="&#xf043; Input">

我在这里使用实体，它对应于U + F043，Font Awesome的'tint'符号。

CSS格式

然后，我们必须将其样式化以使用字体：

.fa-input {
  font-family: FontAwesome, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

这将为我们提供Font Awesome中的色调符号和适当字体中的其他文本。
但是，此控件的像素并不完美，因此您可能需要自行调整。

你可以使用字体真棒utf秘籍

<input type="submit" class="btn btn-success" value="&#xf011; Login"/>

这里是备忘单http://fortawesome.github.io/Font-Awesome/cheatsheet/的链接

从技术上讲，不可能让:before和:after伪元素在input元素上工作
来自W3C：

12.1：before和：after伪元素

作者使用：before和：after伪元素指定生成内容的样式和位置。正如它们的名称所示，：before和：after伪元素指定元素的文档树内容之前和之后的内容位置。'content'属性与这些伪元素一起指定插入的内容。
因此，我有一个项目，我有input标签形式的提交按钮，出于某种原因，其他开发人员限制我使用<button>标签，而不是通常的输入提交按钮，所以我想出了另一个解决方案，将按钮 Package 在span中，设置为position: relative;，然后使用:after伪值绝对定位图标。
注意：演示fiddle使用FontAwesome 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;，我使用它是因为当鼠标悬停在:after伪生成的内容上时，按钮不会单击，因此使用none的值将强制单击操作通过该内容。
从Mozilla Developer Network开始：
除了指示该元素不是鼠标事件的目标之外，值none还指示鼠标事件“穿过”该元素，并将该元素“下面”的任何内容作为目标。
将鼠标悬停在心形font/图标Demo上，看看如果不使用pointer-events: none;会发生什么

您可以使用按钮类别btn-link和btn-xs搭配类型submit，这会产生一个内部有图标的小不可见按钮。范例：

<button class="btn btn-link btn-xs" type="submit" name="action" value="delete">
    <i class="fa fa-times text-danger"></i>
</button>

也可能像这样

<button type="submit" class="icon-search icon-large"></button>

对于多次提交，当您需要所选提交的值时，这可以很容易地完成。只需在表单中创建一个隐藏字段，并根据单击的按钮更改其值。例如，在表单中，假设您有：

<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变量中检索所单击按钮的值

将实际符号复制到提交值属性中

<input type="submit" value="Send ➢ ➔ " class="btn btn-default" />