字体很棒,输入类型'提交'

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中获取:如何使用文本+图像制作提交按钮？)使用font-awesome？

Answer 1

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

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

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

你可以使用字体awesome utf cheatsheet

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

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

Answer 4

嗯,从技术上讲,不可能获得:before和:after伪元素在input元素上工作

来自W3C:

12.1:before和:after伪元素

作者使用:before和:after伪元素指定生成内容的样式和位置.正如其名称所示,:before和:after伪元素指定元素文档树内容之前和之后的内容位置.'content'属性与这些伪元素一起指定插入的内容.

所以我有一个项目,我以input标签的形式提交按钮,由于某种原因,其他开发人员限制我使用<button>标签而不是通常的输入提交按钮,所以我提出了另一个解决方案,将按钮包装在一个span集合中对position: relative;,然后使用绝对定位图标: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;
}

Demo

现在这里的一切都是自我解释的,关于一个属性,即pointer-events: none;我已经使用过,因为:after将鼠标悬停在伪生成的内容上时,您的按钮不会单击,因此使用值none会强制点击操作通过该内容.

来自Mozilla开发者网络:

除了指示元素不是鼠标事件的目标之外,值none指示鼠标事件"穿过"元素并且目标是"该元素"下面的任何内容.

将心形字体/图标悬停Demo,看看如果你不使用会发生什么pointer-events: none;

Answer 5

您可以使用按钮类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>

Answer 6

也可能这样

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