字体-真棒，输入类型'提交'

StackOverflow https://stackoverflow.com//questions/11686007

题

在font-awesome中似乎没有输入类型'submit'的类。是否可以使用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格式:如何制作一个包含文本+图像的提交按钮?）与字体-真棒？

有帮助吗？

解决方案

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

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

对于字体令人敬畏3.2.0使用

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

其他提示

HTML格式

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

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

我正在使用 &#xf043; 这里的实体，对应于U+F043，字体真棒的'色调'符号。

CSS

然后我们必须设置样式以使用字体:

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

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

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

可以使用字体真棒utf endsheet 

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

这是作战表的链接 http://fortawesome.github.io/font-awesome/cheatsheet/

从技术上讲，这是不可能的 :before 和 :after 伪元素工作 input 元素

从 W3C:

12.1伪元素的:before和:after

作者使用 ：伪元素之前和：伪元素之后。正如他们的名字所示， :before和:after伪元素指定内容的位置 在元素的文档树内容之前和之后。"内容" property与这些伪元素一起指定了什么是 插入。

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

注:演示小提琴使用fontawesome3.2.1的内容代码so 您可能需要更改 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;
}

示范

现在这里的一切都是不言自明的，关于一个属性，即 pointer-events: none;, ，我用它是因为在 :after 伪生成的内容，你的按钮不会点击，所以使用的值 none 将强制单击操作通过该内容。

从 Mozilla开发者网络 :

除了指示元素不是鼠标的目标 事件，值none指示鼠标事件"通过" 元素和目标，而不是在该元素"下面"的任何东西。

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

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

也可以像这样

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

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

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

然后，您可以检索单击“单击”后变量中的按钮的值

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top