首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

simple_form_for on submit按钮上的Fontawesome

simple_form_for是一个Ruby on Rails框架中的表单生成器,用于简化表单的创建和处理。它提供了一种简洁的方式来定义表单字段、验证规则和提交行为。

on submit按钮上的Fontawesome是指在表单的提交按钮上使用Font Awesome图标库中的图标。Font Awesome是一个流行的图标字体库,提供了丰富的矢量图标,可以通过CSS样式来使用。

在simple_form_for中,可以通过自定义按钮的HTML选项来添加Font Awesome图标。具体步骤如下:

  1. 首先,确保你已经在Rails应用中引入了Font Awesome库。可以通过在应用的CSS文件中添加以下代码来引入:
代码语言:txt
复制
@import 'font-awesome';
  1. 在simple_form_for的提交按钮上添加一个自定义的HTML选项,例如:
代码语言:txt
复制
<%= f.button :submit, class: 'btn btn-primary', 'data-disable-with': '<i class="fa fa-spinner fa-spin"></i> Submitting' %>

上述代码中,'data-disable-with'选项用于在提交表单时禁用按钮,并显示一个带有旋转动画的Font Awesome图标。

这样,当用户点击提交按钮时,按钮将被禁用,并显示一个旋转的图标,以表示正在提交中。

推荐的腾讯云相关产品:腾讯云CDN(内容分发网络),它可以加速网站的访问速度,提高用户体验。腾讯云CDN产品介绍链接地址:https://cloud.tencent.com/product/cdn

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

asp.net webform中submit按钮使用不当很容易犯一个错误

webform中默认一个页面只能有一个form,有时submit按钮使用不当会产生一些奇怪问题。...但是如果遇到下面的情况,且二部分功能是不同程序员来写时,就可能出问题: 另一个前端开发人员把“登录模块”加进来以后(注:“登录”按钮是服务端Button控件,即最终在html中也是submit按钮...,单独点击“登录”按钮时,一切正常),但是在一个form中,在任何一个文本框上按下回车键时,相当于默认点击了第一个submit按钮(即提交表单),这样在登录过程中,当用户输入完邮箱、密码、验证码,按下回车键时候...,实际上会触发“搜索”按钮click行为,而搜索按钮在上面的处理中,调用是doSearch()方法,最终页面会引导到搜索页,并未按原来意图提交,导致登录不了。...“各自单独模块”独立测试时都是正常,但是整合在一起就容易出问题了,所以说这种错误容易犯,我建议是对于webform中开发,不是必须要submit场景,尽量避免用submit按钮

1.3K50
  • 奈飞(三):隐藏在播放按钮奥秘(

    你在Netflix App或网站中看到喜欢视频后,点击播放按钮,立刻视频就魔术般地出现在眼前。真的很简单,不是吗?其实不然。 ? 也许你会认为Netflix完全利用AWS来提供视频服务。...在Netflix应用中点击播放按钮后,存放在AWS S3中视频文件会被以视频流形式通过因特网传送到你设备。乍看起来,这似乎是一个非常合理方法,就像很多小型应用一样。...在你点击播放按钮之前一切活动都发生在AWS,包括准备新视频、处理所有客户端发来请求等。 点击播放按钮一切活动由Open Connect处理。...它是Netflix定制全球CDN服务,它在全球不同地方保存视频。你点击播放按钮后,Open Connect中视频以流形式进入你设备。不要着急,后面我们会详细介绍它。...云计算:你点击播放按钮行为都在AWS中处理 任何不涉及视频流请求都在AWS中处理,包括可伸缩计算、可伸缩存储、业务逻辑、可伸缩分布式数据库、大数据处理和分析、推荐、转码以及数百种其他功能。

    1.7K10

    Excel实战技巧65: 制作漂亮用户窗体按钮——当鼠标移动到按钮时高亮显示

    下面,我们来实现当鼠标移动到用户窗体按钮时,会使用颜色高亮显示,让用户窗体更生动,如下图1所示。 ? 其实,你在图1中看到按钮并不是用户窗体内置传统命令按钮,而是使用图像控件来制作。...由于图像是静态,在运行时不能更改颜色,因此每个按钮都由两个图像组成,一个图像代表鼠标悬浮在按钮状态,另一个图像代表鼠标未悬浮在按钮状态。...本例中,将使用绿色和白色/灰色格式来指示用户是否将鼠标悬停在特定按钮。下图2是我制作用于按钮图像文本框。 ? 这里要注意是,四个文本框大小和格式设置都必须完全相同。...复制一个刚才绘制图像控件,如下图6所示。 ? 这个图像将代码鼠标不在按钮状态。...Me.CancelButtoninactive.Visible = True Me.OKButtonInactive.Visible = False End Sub 当鼠标移动到确定按钮

    8.2K20

    奈飞(三):隐藏在播放按钮奥秘(下)

    “云奈飞”系列文章目录: 云中奈飞(一):Netflix云之旅 云奈飞(二):Netflix全球视频流服务微服务架构设计 云奈飞(三):隐藏在播放按钮奥秘() Open Connect...当我Google查询被路由到互联网上时,它不再位于Comcast网络,也不在位于Google网络,而位于互联网主干网上。互联网由许多要交互多个私有网络组成。...现在,我们终于可以看到整个流程了: 你首先选择要在某个设备中客户端上观看视频,然后点击播放按钮。...Netflix客户端向在AWS中运行Playback Apps服务发送播放请求,指示你要播放哪个视频。 有一点我们之前没提过,就是在你点击播放按钮之后发生大部分事情都与许可有关。...每当你在Netflix上点击播放按钮时,以上这些就会发生。谁会想到这么简单事情,会有如此复杂实现过程呢?!

    1.8K10

    【实测】vueelementUI 文件上传按钮,如何用selenium来自动化上传?(

    在打开文件选择器,纯用键盘来输入文件路径,粘贴,剪切,回车等来实现。但是这个方法有时候并不可靠,但却简单易懂。 【方案二】直接用js或者模拟请求等来实现自动化。...本节就拿最常见Vue 和 ElementUI组合来实现吧~ (在传统html编写中,上传文件代码按钮元素为Input type="file" ,所以本质上来说,这个按钮还是一个输入框,所以那时候的人们是直接给这个元素进行...不过近年来,新前端样式框架越来越多,上传文件按钮也变得五花八门,对我们selenium自动化来说是很致命打击。...步骤四:再循环增加几个数据测试 效果如下: 所以我们这个猜想大致是ok。...那么我们这里理论写法应该是先看页面的这些data内变量名称。 然后: js = 'myData.

    2.8K20

    我用STM32MP1做了个疫情监控平台4—功能完善界面重新设计

    FontAwesome字体图标库使用 自定义标题栏按钮,可点击图标关闭窗口,手动更新等 4.API 接口说明 所使用到几个接口地址: 根据请求IP地址,返回定位城市名称和经纬度 http://...page=0 5.多个接口数据获取和解析 和上一个版本最大区别就是,一版只使用了1个API。...); void parseApi_2(QByteArray str); /*谣言信息解析,未使用*/ void parseApi_3(QByteArray str); 由于板子系统还没有移植...FontAwesome字体图标库使用 在这次新版本中,我首次使用了FontAwesome字体图标库,图标显示效果: ? 使用起来非常方便,简单。...标签或者按钮添加图标背景: #include void MainWindow::iconDemo() { //fontawesome-webfont.ttf图标库示例

    89620

    在微信小程序中使用fontawesome6

    在微信小程序中使用fontawesome6 一、下载fontawesome6 https://fontawesome.com/download 我这边选择是Free for web 版本 二、使用transfonter...编码成Base64 (1)首先先把刚刚下载fontawesome6解压,得到如下文件目录。...[fontawesome6目录结构] 打开webfonts文件夹 [fontawesome6/webfonts] 把需要字体上传(点击“Add fonts”按钮)到transfonter,打开Base64...文件夹中创建一个新文件叫font-awesome.wxss [style文件夹] 回到最开始下载解压完成fontawesome6文件夹中,打开css目录,找到fontawesome.css并打开,将文件内所有内容复制到...[需要删除部分] 然后再打开fontawesome6/css文件夹,找到你编码对应字体css文件,将其中内容复制到font-awesome.wxss中去,我用了far和fas,如果你用也是这俩,可以直接复制下面的进去

    3.6K11

    【新手推荐】极简主义响应式主题——Kratos V2.6.0

    lg页面gotop #30 修复共享btn风格 修复a:悬停默认颜色#43 #12 修复默认删除功能#16 修复标题行夹#48 #45 删除diy资源 删除升级配置 优化默认微信QR图像 优化更改按钮颜色...bootstrap.min.css │ ├── font-awesome.min.css │ ├── layer.min.css │ └── superfish.min.css ├── fonts │ ├── FontAwesome.otf...│ ├── fontawesome-webfont.eot │ ├── fontawesome-webfont.svg │ ├── fontawesome-webfont.ttf │...├── fontawesome-webfont.woff │ └── fontawesome-webfont.woff2 ├── footer.php ├── functions.php ├── header-abstract.php...── page.php ├── screenshot.png ├── single.php ├── smiley.php └── style.css Kratos V2.6.0 /*** 点击上方绿色按钮

    1.4K80

    宿舍报修系统基于易班开发平台版本开源

    MD5,简单表达式说明md5("rains"+你密码) 后台还支持将维修记录导出为excel文档等等,更多功能自行挖掘 本次程序写得仓促,代码难免不规范,功能不完善,同时也没有使用框架开发,新系统...index.php 第4行 第18行 myhouse.php 第12行 operate.php 第12行 question.php 第4行 submit.php 第13行 其中index.php第四行为一般登录接口回调地址格式如下...config.php │ index.php │ log.txt │ logo.png │ myhouse.php │ operate.php │ order.php │ question.php │ submit.php...│ │ fontawesome-webfont.svg │ │ fontawesome-webfont.svgz │ │ fontawesome-webfont.ttf...│ │ fontawesome-webfont.woff │ │ fontawesome-webfont_162a16fe.eot │ │ │ ├─img │

    1.8K21

    纯代码给 WordPress 文章编辑器增加 Prism.js 代码高亮快捷按钮

    之前发过文章说过:使用 Prism.js 实现漂亮代码语法高亮,本博客也使用是它 直接写代码发布的话,灰茫茫一片,很丑,所以有了 Prism.js 引用代码片段就变得有了好看样式 但是作为技术博客,每篇文章基本都会有代码,而 Prism 使用语义化 元素和 元素来标记代码区块,每次都要手动敲的话还是很麻烦 所以这篇文章就是一个小技巧,怎么在 WordPress...文章编辑器增加 Prism.js 代码高亮快捷按钮 打开你 functions.php 文件,加入以下代码 // 自定义代码高亮按钮 function appthemes_add_quicktags...,切换到文本模式 纯代码给 WordPress 文章编辑器增加 Prism.js 代码高亮快捷按钮 直接点击编辑器按钮,就可以添加对应片段,不用每次费事一个一个敲了 沈唁志,一个...原创文章采用CC BY-NC-SA 4.0协议进行许可,转载请注明:转载自:纯代码给 WordPress 文章编辑器增加 Prism.js 代码高亮快捷按钮

    2.3K10

    不要在按钮、链接或任何其他文本容器使用固定 CSS 高度或宽度

    免费体验 Gpt4 plus 与 AI作图神器,我们出钱 体验地址:体验 为什么 尽管一些网页设计工具为按钮等元素指定了 CSS 高度值,但设置高度或最大高度实际可能会违反 WCAG 2.2 Success...如果对影响元素计算高度和宽度 CSS 属性使用固定值,当文字大小增大时,元素内部文字会被截断。 还不信服? 你可能会想:"但当我把浏览器放大到 200% 时,按钮文本看起来很好!"...演示 1 首先,我们看看在 font-size 、 height 、 line-height 和 width 使用固定值情况下,当文字大小增大时会发生什么。在文字大小增大之前,按钮看起来很棒!...,并尝试在 line-height 和 padding 中不使用单位,以影响按钮 height 和 width 。...根据我经验,随着视口尺寸缩小,我发现这种方法更难维护。 想象一下,一个具有大文本大小设置移动设备。使用 em 单位设置文本容器可能会比视口宽。

    11010

    Axure RP8入门之基本操作篇

    添加元件到画布 在左侧元件库中选择要使用元件,按住鼠标左键不放,拖动到画布适合位置松开。 ### 2. 添加元件名称 在检视面板元件名称文本框中输入元件自定义名称,建议采用英文命名。...### 12.设置打开选择文件窗口 文本框属性中选择文本框{类型}为【文件】,即可在浏览器中变成打开选择本地文件按钮。该按钮样式各浏览器略有不同。...### 22.设置单选按钮唯一选中 全选所有的单选按钮,在元件属性中{设置单选按钮组名称},即可实现唯一选中效果。...### 24.设置图片文本 设置图片文本需要在图片上点击,选择【编辑文本】,方可进行图片文字编辑 ### 25.切割/裁剪图片 在图片元件属性中,设有切割和裁剪功能图标,点击即可使用相应功能...例如,使用少量特殊字体或者图标字体时,即可将元件转换为图片,避免在未安装字体设备浏览原型时不能正常显示。

    5.1K30

    BootStrap

    引用这一个或者下面那个bootstrap.min.css文件就可以了 │ ├── bootstrap.css.map │ ├── bootstrap.min.css // 核心CSS样式压缩文件,其他文件都是在这个核心文件基础加了一些其他样式...我们只要在基本HTML元素通过设置class就能够应用上Bootstrap样式,从而使我们页面更美观和谐。   基础模板:简单看看结构 <!...紧缩型表格 .table-responsive 响应式表格 状态类 Class 描述 .active 鼠标悬停在行或单元格时所设置颜色 .success 标识成功或积极动作...="btn btn-default" type="submit" value="Submit">     按钮样式 <!...常用Bootstrap组件(就是一些搭配起来效果,也涉及到一些动作相关,所以需要引入js文件了) 字体图标(fontawesome里面比较全) 下拉菜单 按钮组 输入框俎 导航 分页 标签和徽章

    5.5K30

    基于Vue2.xUI组件库引入Iconfont图标库(引入第三方图标库篇)

    具体可查看笔者qiucode-UI文档:qiucode-UI文档地址 本篇笔者将讲解在Vue项目中如何引入第三方图标库,如:Inconfont https://www.iconfont.cn...fontawesome https://fontawesome.io/ 登录到Iconfont官网,然后选择你想要图标,添加到购物车里。...最后添加到你项目里。 你可以在你项目直接引入外网css,可在线生成链接按钮进行生成链接,在你html中添加这个远程css链接就可以了!是不是很方便啊!...但如果考虑到有的用户网速并不是那么好,这样就对用户体验就不好(这是乔布斯提出,对用户要有友好体验) 那么就下载它,文件结构如下图: 将iconfont.eot iconfont.svg.../packages/qiu-style/iconfont.css' 具体可查看笔者qiucode-UI文档:https://zhenqicai.github.io/qiucodeUI-docs/#

    1.7K10

    FontAwesome基础知识

    2019年实习时 FontAwesome基础知识 备份 基本介绍及用法 基本介绍 FontAwesome是一套绝佳图标字体库 提供可缩放矢量图标 可以使用CSS提供所有特性进行更改,包括:大小、.../fontawesome/js/fontawesome.js"> 图标备忘录 可在官方网址搜索自己想要图标 也可直接下载为离线PDF文档搜索自己想要图标。...HTML元素添加fa-fw类,将一个或多个图标设为相同固定宽度1.25em。...Description fa-border 图标添加外框 fa-pull-right 图标向右浮动 fa-pull-left 图标向左浮动 堆叠(Stacking Icons) 要堆叠多个图标,请使用父级...up/right/down/left-* rotate-* flip-v flip-h"> 分层/文本和计数器(Layering,Text and Counters) 图层是一种将图标和文本视觉彼此叠加新方法

    27110
    领券