Font-awesome，输入类型'submit‘

Question

在font-awesome中似乎没有输入类型'submit‘的类。是否可以使用font-awesome中的某些类来进行按钮输入？我已经在我的应用程序中为所有的按钮添加了图标(实际上是链接到来自twitter-bootstrap的'btn‘类)，但是不能在'input type submit’上添加图标。

或者，如何使用此代码：

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: How to make a submit button with text + image in it?上取来的)，字体太棒了？

Answer 1

使用按钮type=“提交”而不是输入

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

对于Font Awese3.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，即Font Awesome的“tint”符号。

CSS

然后我们必须设置它的样式以使用字体：

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

这将为我们提供font Awesome字体的色调符号和适当字体的其他文本。

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

Answer 3

你可以使用font awesome utf cheatsheet

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

下面是cheatsheet http://fortawesome.github.io/Font-Awesome/cheatsheet/的链接