字体真棒，inputtypes“提交”

在font-awesome中似乎没有inputtypes“提交”的类。 是否有可能使用字体真棒buttoninput一些类？ 我已经在应用程序中为所有button（实际上与twitter-bootstrap中的类“btn”链接）添加了图标，但不能在“inputtypes提交”上添加图标。

或者，如何使用这个代码：

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采取：如何使其中的文字+图像提交button？ ）与字体真棒？

Answer 1

使用buttontypes=“提交”，而不是input

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

Answer 2

HTML

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

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

我正在使用 实体在这里，这对应于U + F043，字体真棒的“色彩”的象征。

CSS

然后，我们必须将其设置为使用字体：

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

这将给我们在字体真棒和其他文字在适当的字体中的色调符号。

但是，这个控件不是像素完美的，所以你可能需要自己调整它。

Answer 3

你可以使用字体真棒UTF Cheatsheet

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

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

Answer 4

那么，从技术上来说， :after伪元素在input元素上工作:before和:after不可能的

从W3C ：

12.1：之前和之后：伪元素

作者使用：before和：after伪元素指定生成内容的样式和位置。 正如它们的名字所表示的那样：before和之后：伪元素指定元素的文档树内容之前和之后的内容的位置。 'content'属性与这些伪元素一起指定了什么被插入。

---

所以我有一个项目，我以提交input标签的forms提交button，由于某些原因，其他开发人员限制我使用<button>标签，而不是通常的input提交button，所以我想出了另一个解决scheme，一个span内的button设置为position: relative; 然后绝对定位图标使用:after伪:after 。

注意：演示提琴使用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; } 

演示

现在这里一切都是自我解释，关于一个属性，即pointer-events: none; ，我使用过，因为在hover在:after伪生成的内容之后，button不会点击，所以使用none的值将强制点击操作通过该内容。

来自Mozilla开发者networking ：

除了指示该元素不是鼠标事件的目标之外，值none指示鼠标事件“穿过”该元素并且指定该元素“下面”的任何东西。

hover心脏字体/图标演示 ，看看会发生什么，如果你不使用pointer-events: none;

Answer 5

您可以使用types为submitbutton类btn-link和btn-xs ，这会在内部创build一个小小的不可见button。 例：

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

Answer 6

也可能是这样的

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

Answer 7

通过多次提交，当您需要select提交的值时，可以很容易地完成。 只需在您的表单中创build一个隐藏字段，并根据点击的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”后variables中单击的button的值