字体真棒,输入类型“提交”

Posted

技术标签:

【中文标题】字体真棒,输入类型“提交”【英文标题】:Font-awesome, input type 'submit' 【发布时间】:2012-07-26 00:37:24 【问题描述】:

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?)字体真棒?

【问题讨论】:

【参考方案1】:

使用按钮 type="submit" 代替输入

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

【讨论】:

太棒了!按预期工作。仍然需要一些步骤来适应 simple_form 或创建一个助手,但它相对容易。 还要注意&lt;button type=submit&gt;&lt;input type=submit&gt;之间的区别:***.com/questions/3543615/… @stanislav-mayorov 它确实有效。如果您使用的是当前版本 4.7,则必须从 3.2.0(从 2012 年开始)进行调整。尝试更新的答案。 @JoaoLeme &lt;button type="submit"&gt; 适用于任何形式吗? 当我想避免重新加载页面时,这不起作用。【参考方案2】:

HTML

由于&lt;input&gt;元素只显示value属性的值,我们只需要操作它:

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

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

CSS

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

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

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

但是,此控件不是像素完美的,因此您可能需要自己调整它。

【讨论】:

感谢您的回答,它有效,但我实际上不能使用这种方法,因为字体会影响整个值的文本。我也在其他按钮中使用“icon-large”...对于那些将尝试这个的人,字体代码在这里:github.com/FortAwesome/Font-Awesome/blob/master/sass/… 我想这就是我们在这里所能做的。我个人建议你离开&lt;input&gt;s 不带图标。 工作正常,我必须使用 因为我在一个表单中有两个提交 这比在元素类中添加“fa”要好,因为“fa”会改变元素的高度。 您也可以使用内联样式 font-family 属性在任何具有文本内容的 HTML 元素中使用它。【参考方案3】:

你可以使用 font awesome utf cheatsheet

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

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

【讨论】:

这让我很开心!谢谢.. 对于任何其他用户,请注意以下句子直接从该页面复制并粘贴图标(不是 unicode)到您的设计中,即复制实际图标并它会工作 &lt;input type="button" class="fa" value="&amp;#xf011; Login"/&gt; 没有引导使用 fa 类使其工作 如果您尝试使用 javascript 或 jQuery 进行设置,请使用 unicode 变体:$("input.search").addClass("fa").val("\uf011 Login"); 即使使用 Bootstrap 我也需要添加 class="fa" 才能使其正常工作。 这对我来说只是一个矩形。耻辱【参考方案4】:

嗯,从技术上讲,不可能让 :before:after 伪元素对 input 元素起作用

来自W3C:

12.1 :before 和 :after 伪元素

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


所以我有一个项目,我有input标签形式的提交按钮,由于某种原因,其他开发人员限制我使用&lt;button&gt;标签而不是通常的输入提交按钮,所以我想出了另一个解决方案,将按钮包装在 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 伪生成内容上时,您的按钮不会点击,所以使用@987654340 的值@ 将强制点击动作通过该内容。

来自Mozilla Developer Network:

除了表明该元素不是鼠标的目标 事件,值 none 指示鼠标事件“通过” 元素并以该元素“下方”的任何内容为目标。

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

【讨论】:

虽然是一个非常酷的解决方案,但它有一个很大的缺点:指针事件:IEcaniuse.com/#feat=pointer-events) 不支持指针事件:无。原因是 pointer-events 属性是为 SVG 元素(矢量图形)创建的,并且它在 W3C 规范中并不适用于其他 HTML 元素(然而,wiki.csswg.org/spec/css4-ui#pointer-events),尽管除了 IE 【参考方案5】:

您可以使用类型为submit 的按钮类btn-linkbtn-xs,这将创建一个内部带有图标的小不可见按钮。示例:

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

【讨论】:

【参考方案6】:

也可以这样

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

【讨论】:

【参考方案7】:

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

<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”后变量中检索点击按钮的值

【讨论】:

以上是关于字体真棒,输入类型“提交”的主要内容,如果未能解决你的问题,请参考以下文章

使用 jquery 添加类后,字体真棒图标字体作为输入中的占位符

物化输入内的字体真棒图标

如何在 Vue.js 中动态添加字体真棒图标

如何在自定义帖子类型UI菜单图标区域添加字体真棒图标?

(打字稿)试图将字体真棒图标作为对象传递给子组件时遇到问题

构建字体真棒图标