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


当前回答

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

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

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

其他回答

也可能像这样

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

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

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

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

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

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

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

从技术上讲,不可能让:before和:after伪元素作用于输入元素

W3C:

12.1:before和:after伪元素 类型指定生成内容的样式和位置 :伪元素之前和之后。正如它们的名字所示 :前:后伪元素指定内容的位置 在元素的文档树内容之前和之后。“内容” 属性与这些伪元素一起指定是什么 插入。


所以我有一个项目,我有提交按钮在输入标签的形式,由于某种原因,其他开发人员限制我使用<button>标签,而不是通常的输入提交按钮,所以我想出了另一个解决方案,包装按钮在一个跨度设置的位置:相对;然后绝对定位图标使用:后伪。

注意:演示小提琴使用fontaweesome 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;,我使用这个属性是因为在伪生成内容后悬停在:上,你的按钮不会单击,因此使用none值将强制单击操作通过该内容。

来自Mozilla开发者网络:

除了表示该元素不是鼠标的目标 事件,值none指示鼠标事件“通过” 元素,并将目标改为该元素“下面”的内容。

悬停心形字体/图标演示,看看如果你不使用指针事件会发生什么:none;