在font-awesome中，似乎没有输入类型'submit'的类。是否可以使用font-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中获取：如何制作带有文本+图片的提交按钮？）字体真棒？

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

<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>element仅显示value属性的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>标签，而不是通常的输入提交按钮，因此我想出了另一种解决方案，将按钮包装在一span组中对position: relative;，然后使用绝对定位图标:after假。

注意：演示小提琴使用FontAwesome 3.2.1的内容代码，因此您可能需要相应地更改contentproperty 的值。

的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开发人员网络：

除了指示该元素不是鼠标事件的目标之外，该值none指示鼠标事件“通过”该元素并以该元素“之下”的对象为目标。

将鼠标悬停在心脏字体/图标上Demo，看看如果不使用会发生什么pointer-events: none;

您可以使用按钮类btn-link和btn-xstype 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”发布变量中检索单击的按钮的值