字体很棒，输入类型为“submit”

似乎没有类的输入类型'提交'在字体-真棒。是否有可能使用一些类从字体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中学到的:如何制作一个文本+图像的提交按钮?)

当前回答

HTML

由于<input>元素只显示value属性的值，我们必须只操作它:

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

我使用实体，它对应于U+F043，字体Awesome的“tint”符号。

CSS

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

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

这将给我们着色符号在字体Awesome和其他文本在适当的字体。

然而，这个控件不是像素完美的，所以你可能不得不自己调整它。

其他回答

HTML

由于<input>元素只显示value属性的值，我们必须只操作它:

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

我使用实体，它对应于U+F043，字体Awesome的“tint”符号。

CSS

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

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

这将给我们着色符号在字体Awesome和其他文本在适当的字体。

然而，这个控件不是像素完美的，所以你可能不得不自己调整它。

使用button type="submit"而不是input

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

为字体Awesome 3.2.0使用

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

你可以使用按钮类btn-link和btn-xs类型提交，这将使一个小的隐形按钮，其中有一个图标。例子:

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

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

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

你可以使用字体awesome utf备忘单

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

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

推荐文章