224

font-awesome 中似乎没有输入类型“提交”的类。是否可以使用 font-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：How to make a submit button with text + image in it？）字体真棒？

4

7 回答 7

378

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

<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>
于 2012-08-28T02:48:45.560 回答
98

HTML

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

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

我在&#xf043;这里使用实体，它对应于 U+F043，Font Awesome 的“色调”符号。

CSS

然后我们必须对其进行样式设置以使用字体：

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

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

但是，此控件不是像素完美的，因此您可能必须自己调整它。

于 2012-07-28T17:39:49.520 回答
59

您可以使用字体真棒 utf 备忘单

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

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

于 2014-08-29T04:34:15.760 回答
13

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

于 2014-03-18T11:32:07.637 回答
9

您可以使用按钮类btn-link和btn-xstype submit，这将制作一个内部带有图标的小不可见按钮。例子：

<button class="btn btn-link btn-xs" type="submit" name="action" value="delete">
    <i class="fa fa-times text-danger"></i>
</button>
于 2016-02-04T12:14:45.553 回答
4

也可以这样

<button type="submit" class="icon-search icon-large"></button>
于 2013-09-15T02:03:07.030 回答
2

通过多次提交，当您需要选择提交的值时，这可以很容易地完成。只需在表单中创建一个隐藏字段并根据单击的按钮更改其值。例如，在表格中，假设您有：

<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”帖子变量中单击的按钮的值

于 2017-10-26T02:33:08.833 回答