Twitter bootstrap 字体，输入类型'；提交'；

字体中似乎没有输入类型“submit”的类。是否可以使用font awesome中的某个类进行按钮输入？我已经在我的应用程序中的所有按钮上添加了图标（实际上与twitter引导程序中的类“btn”链接），但无法在“输入类型提交”上添加图标

或者，如何使用此代码：

input#image-button{
    background: #ccc url('icon.png') no-repeat top left;
    padding-left: 16px;
    height: 16px;
}

html:

文本

（我取自）字体很棒？

HTML 由于

元素只显示value属性的值，因此我们必须只操作它：

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

这将为我们提供字体为Awesome的色调符号和相应字体的其他文本

但是，此控件不是完美的像素，因此您可能需要自己调整它。

使用button type=“submit”而不是输入

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

下一个

对于字体可怕3.2.0，请使用

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

下一个

也可以这样

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

---

好吧，从技术上讲，不可能在

之前和
之后获得
:

发件人：

12.1：伪元素之前和之后
作者使用
：在伪元素之前和：在伪元素之后。正如他们的名字所表明的那样
：before和：after伪元素指定内容的位置
在元素的文档树内容之前和之后。“内容”
属性与这些伪元素一起指定
插入


因此，我有一个项目，其中我有一个提交按钮，其形式为
input
标记，出于某种原因，其他开发人员限制我使用
标记，而不是通常的input submit按钮，因此我想出了另一个解决方案，将按钮包装在
span
设置为
位置：relative：after
pseudo绝对定位图标

注意：demo fiddle使用3.2.1 so的内容代码
您可能需要相应地更改
content
属性的值

HTML

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


这里的一切都是不言自明的，关于一个属性，即
指针事件：无
，我之所以使用它，是因为在将鼠标悬停在
：伪生成内容之后，您的按钮不会单击，因此使用
none
的值将强制单击操作通过该内容

发件人：

除了指示元素不是鼠标的目标之外
事件，值none指示鼠标事件“通过”事件
元素，并以该元素“下面”的任何内容为目标

将鼠标悬停在心形字体/图标上，查看如果不使用
指针事件：无会发生什么
您可以使用字体awesome utf备忘单

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



这是备忘单的链接
您可以使用按钮类
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>

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

<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>


$（文档）.ready（函数（）
{
$（'.ClickCheck'）。单击（函数（）
{
var ButtonID=$（this.attr（'id'）；
$（'点击'）.val（ButtonID）；
});
});

然后，您可以在“clicked”post变量中检索单击的按钮的值
感谢您的回答，它是有效的，但我实际上不能使用这种方法，因为字体会影响整个值的文本。我还在其他按钮中使用“图标大”。。。对于那些想尝试的人来说，字体代码就在这里：我想这就是我们在这里所能做的。就我个人而言，我建议您离开
s，不带图标。工作正常，我必须使用，因为我有两个提交表单。这比在元素类中添加“fa”要好，因为“fa”将更改元素的高度。此外，您还可以使用内联样式
字体系列
属性在任何包含文本内容的HTML元素中使用它。太棒了！一切正常。仍然需要一些步骤来适应简单表单或创建助手，但这相对容易。还要注意
和
之间的区别：@stanislav mayorov它确实有效。如果您使用的是当前版本4.7，则必须从3.2.0（2012年起）进行调整。试试更新后的答案。@JoaoLeme对任何形式都有效吗？当我想避免重新加载页面时，这不起作用。虽然这是一个非常酷的解决方案，但它有一个很大的缺点：指针事件：没有一个不受《让我开心一天》支持！谢谢对于任何其他用户，请注意下面这句话：将图标（而不是unicode）直接从此页面复制并粘贴到您的设计中，即复制实际图标，它将在无引导的情况下工作
，使用fa类使其工作如果您试图使用javascript或jQuery设置此项，请使用unicode变体：
$（“input.search”）.addClass（“fa”）.val（“\uf011登录”）即使使用引导，我也需要添加class=“fa”以使其正常工作。这只为我生成一个矩形。羞耻
<button class="btn btn-link btn-xs" type="submit" name="action" value="delete">
    <i class="fa fa-times text-danger"></i>
</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>

<script type="text/javascript">
    $(document).ready(function()
    {
        $('.ClickCheck').click(function()
        {
            var ButtonID = $(this).attr('id');
            $('#Clicked').val(ButtonID);
        });
    });
</script>