开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

无法在“提交”按钮中动态使用“Font Awesome”图标

问题：无法在“提交”按钮中动态使用“Font Awesome”图标

答案：在使用Font Awesome图标时，可以通过以下步骤动态使用它们：

集成Font Awesome库：首先，在你的项目中引入Font Awesome库。你可以通过将以下代码放置在HTML文件的<head>标签中来实现：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-W9LJDwA8K6tW82vRyWh3oA6vZzhrCJrxH7zLCtJdb1ztDlYYlkoR7b2tEP2EmGdJxKnDnVkmE/IprUpxpNykfA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

这将从CDN加载最新版本的Font Awesome库。

在按钮中使用Font Awesome图标：一旦你引入了Font Awesome库，你可以在任何HTML元素中使用Font Awesome图标。为了在“提交”按钮中使用Font Awesome图标，你可以在<button>标签中添加一个带有特定类的<i>标签，并在其中指定所需的图标。以下是示例代码：

<button type="submit" class="btn btn-primary">
  <i class="fas fa-check"></i> 提交
</button>

在上面的代码中，我们将class为"fas fa-check"的<i>标签放置在按钮内部，并使用“fas”类指定Font Awesome Solid类型的图标。你可以根据需要选择不同的图标类。

具体示例及推荐的腾讯云相关产品：由于该问题与腾讯云相关产品无关，这里无法提供腾讯云产品的推荐链接。

希望以上回答能帮助到你解决问题。

相关搜索:在Laravel的表单提交按钮中使用Font Awesome？Font Awesome图标在Firefox中对齐错误使用Composer在Laravel中安装Font Awesome 无法在html中显示的字体awesome图标在Xamarin表单中使用Font Awesome有时会显示奇怪的图标使用React和react-fa在输入文本背景上动态放置一个Font Awesome图标有没有办法在Visual Studio中使用Font Awesome fa-pulse图标在MVC中为提交按钮动态赋值无法在angular web应用程序中显示Font app图标无法使用.net单击网页中的提交按钮如何在React JS中通过三元运算符在文本中使用Font Awesome Icons？在Kivy中无法使用按钮 Font强大的5个图标在使用Nuxt的Vuetify中不起作用在React中提交表单时禁用提交按钮在使用useState挂钩时无法正常工作单击提交按钮或搜索按钮后，在URL中动态获取国家/地区的id Font在选项列表中无法按预期加载令人惊叹的图标(但被选中时)使用Javascript在表格中动态创建切换按钮我想添加一个链接列表中的每个链接前添加Font Awesome图标，然后在链接悬停时通过将其移动到右侧来仅设置图标的动画提交按钮在使用crispy的django表单中不工作仅使用提交按钮在HTML表单中执行onsubmit函数

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

BuildAdmin03：为什么要定义图标组件

说到图标，在BuildAdmin中用到的地方很多。比如上一篇中的折叠图标，还有菜单栏图标、导航菜单栏图标等。常见的图标有：ElementUI图标、font-awesome、iconfont阿里图标以及本地svg这四类图标。

05

Hexo博客 | 博客中能用到的代码（一）

这篇文章介绍了如何使用font awesome图标字体库，使用动态图标，添加网页运行时间，全站变黑白，鼠标点击特效，网页标题的动态效果，网页樱花特效，鼠标触动音乐特效，之前还介绍过打字机效果，可以看看这篇文章

02

Web Icon 123 - 网页内图标的调用

之前保罗在使用 php 写他的第一个个人主页的时候，在他的群里提到了 Font-Awesome 这个项目。当时还是纯小白一个，啥也听不懂。直到后来，看了几篇科普的文章，在2018年1月4日第一次在本地环境调用 Font-Awesome 。

【Java 进阶篇】深入了解 Bootstrap 按钮和图标

按钮和图标在网页设计中扮演着重要的角色，它们是用户与网站或应用程序交互的关键元素之一。Bootstrap 是一个流行的前端框架，提供了丰富的按钮样式和图标库，使开发者能够轻松创建吸引人的界面。在本文中，我们将深入探讨 Bootstrap 中按钮和图标的使用，适合初学者，帮助他们更好地理解和应用这些元素。

03

Font-Awesome如何引入矢量字体图标

💬个人网站：【芒果个人日志】 💬原文地址：Font-Awesome如何引入矢量字体图标 - 芒果个人日志 (wyz-math.cn) 💂作者简介： THUNDER王，一名热爱财税和SAP ABAP编程以及热爱分享的博主。目前于江西师范大学会计学专业大二本科在读，同时任汉硕云（广东）科技有限公司ABAP开发顾问。在学习工作中，我通常使用偏后端的开发语言ABAP，SQL进行任务的完成，对SAP企业管理系统，SAP ABAP开发和数据库具有较深入的研究。 💅文章概要：在开发网页的过程中，我们

03

Vue + Element UI 实现权限管理系统前端篇（十一）

用过Elment的同鞋都知道，Element UI提供的字体图符少之又少，实在是不够用啊，幸好现在有不少丰富的第三方图标库可用，引入也不会很麻烦。

04

Font Awesome 一套绝佳的图标字体库和CSS框架

在bootstrap框架的使用中，字体图标必不可少，Font Awesome 一套绝佳的图标字体库和CSS框架，值得学习。网址：http://fontawesome.dashgame.com/

03

基于Metronic的Bootstrap开发框架经验总结（4）--Bootstrap图标的提取和利用

在前面的一篇随笔《基于Metronic的Bootstrap开发框架经验总结（1）-框架总览及菜单模块的处理》介绍了菜单模块的处理，主要介绍如何动态从数据库里面获取记录并构建菜单列表。其中菜单信息的图标样式，也是从数据库里面获取的，因此要求我们能够动态取得Bootstrap里面的各种图标定义了。本篇主要介绍如何提取Bootstrap的图标信息，存储到数据库里面为我所用。 1、菜单的显示及各种Bootstrap图标我们从下图可以看到，为了菜单的美观，每个菜单项（这里分了三级菜单）都有一个图标，虽然大小不同，我

WP移动端增加好看的底部菜单栏

WordPress添加好看的移动端底部菜单导航，以前也分享过一个导航，不过那个不太好看，这里在分享一个导航在电脑端不显示，手机端显示，其它系统程序也可以用，把代码添加到主题的页脚文件就可以啦，CSS样式可能会和你的主题冲突自己改改吧。

02

Font Awesome矢量图标框架

一、font awesome简介目前图标总数共有519个; 不依赖Javascript 矢量图形,无限缩放免费,可用于商业 CSS控制样式,自定义图标颜色,大小,阴影,一切可能实现的效果支持retina显示(苹果retina 屏幕) 源于BS框架(最初的目标设计使用方向),现在基本支持主流的框架兼容屏幕阅读器图标用到的animation适用于IE8~9 二、font awesome下载及引入方法官网 — 点击Download即可下载最新版本

06

前端学习自学笔记：day06

今天是第六天的笔记,主要是HTML和CSS的,希望大家支持~ 在此之前先为大家显示下前端工程师的路线图: 第六天的笔记:HTML AND CSS: text-center class属性：文本居中：例：your text btn class属性：Bootstrap风格按钮：例：按钮 btn-block class属性:使其按钮填满水平空间：例：按钮注意：添加btn-block时，也需要btn class属性。 btn-primary class属性：深蓝色：例：按钮 btn-info cl

05

WordPress引用阿里巴巴矢量图标库添加彩色图标

现在大部分博客图标都采用Font Awesome图标库，因为Font Awesome图标库满足了大部分用户的需求了，但做为喜欢花里胡哨的我们是不够的，Font Awesome图标库的图标不仅没有彩色的图标，个性化的图标还有点少！所以对于我们喜欢彩色的菜单图标选择性很少！所以只能引入其他的矢量图标库，今天我就分享一下WordPress引用阿里巴巴矢量图标库的彩色图标。

03

Angular4记账webApp练手项目之二（在angular4项目中使用Angular WeUI）

安装后还需要引用weui 样式以及我们的font-awesome图标苦，在我们项目index.html中引用

02

FontAwesome基础知识

注意：fa前缀最新版本中已弃用。新的默认设置是实心的fas样式和品牌的fab样式。

01

动手实践：美化 Jenkins 报告插件的用户界面

对于 Jenkins 而言，可使用插件来可视化各种构建步骤的结果。有一些插件可用于呈现测试结果、代码覆盖率、静态分析等。这些插件通常都会获取给定构建步骤的构建结果，并在用户界面中显示它们。为了呈现这些细节，大多数插件使用静态 HTML 页面，因为这种类型的用户界面是 Jenkins 自 2007 年成立以来的标准可视化。

01

如何写好css系列之button

现代前端行业的发展，如果你在css的时候，还没有利用一些预编译工具，是否觉得自己太low了。但你是否考虑过搭建一套自己前端框架。可能你会想这是否有必要，因为基础有boostrap，组件库有：easyui，elementui，iview，ionic等等。但我个人练习自己如何写好一个css框架，对自己前端能力的提升还是有帮助的。所以本人以此为目标和动力。展开了这个系列的博客之旅。开篇以button为起点。一、与美术交流获取得这些信息 1. 按钮状态：普通状态、鼠标悬停、选中状态、禁用状态 2. 按

07

Web前端基础（09）

1.下载框架文件（也可从Bootstrap官网下载） Bootstrap V3.3.7 Starter ZIP 下载并解压出template和bootstrap3两个文件夹放到工程中 2.复制template文件夹中的starter.html 粘贴到需要创建页面的地方,改名字即可

02

欧零站点导航-图标版带后台最新版

这个源码网上早就有了，不过是没有后台的。带后台的小杰已经发过了，不过这个后台做的还不怎么全面。所以我又去折腾了，全当做学习了。现在分享出来！前台样式前台没有作多大改变，不过是调整了一下

05

jQuery 图片查看插件 Magnify 开发简介（仿 Windows 照片查看器）

前言因为一些特殊的业务需求，经过一个多月的蛰伏及思考，我开发了这款 jQuery 图片查看器插件 Magnify，它实现了 Windows 照片查看器的所有功能，比如模态窗的拖拽、调整大小、最大化，图片的缩放、旋转，平移、键盘控制等。插件的样式都是最基础的 CSS，定制非常容易，可以轻松修改成自己喜欢的样式。随后会陆续发布 React 及 Vue 相关版本的插件。本文主要介绍插件的特点及使用方法，而关于插件开发的细节将会在之后的具体文章中说明。 Github: https://github.com/

09

在网站或桌面应用使用Font Awesome图标库

Font Awesome介绍 Font Awesome为您提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。一个字库，675个图标仅一个Font Awesome字库，就包含了与网页相关的所有形象图标。无需依赖JavaScript Font Awesome完全不依赖JavaScript，因此无需担心兼容性。无限缩放无论在任何尺寸下，可缩放的矢量图形都会为您呈现出完美的图标。如言语一般自由 Font Awesome完全免费，哪

02

如何应用Font Awesome矢量字体图标

本文介绍了如何使用Font Awesome图标字体库在网页中添加社交网络图标、Web应用程序图标和编辑器图标等，同时介绍了如何结合Bootstrap框架提高用户体验。

06

web开发中插入FontAwesome 图标字体库

Font Awesome是一套绝佳的图标字体库和CSS框架，它是可缩放的矢量图标，用户可以可以对图标的特性进行更改，比如大小、颜色、阴影等并且可以组合不同的图标创造自己喜欢的图标。Font Awesome的产生，为网页设计和Web前端开发人员带来极大的方便

03

Hexo相关

把下载好的Js文件放在theme/Butterfly/source/js文件夹下 /Butterfly/layout/includes文件夹下找到head.pug文件，在最后引入

02

学习WPF——使用Font-Awesome图标字体

图标字体介绍在介绍图标字体之前，不得不介绍图标格式ICON ICON是一种图标格式，我们操作系统中各种应用程序都包含一个图标比如QQ程序的图标是一个可爱的企鹅，我的电脑是一个显示器图标 ---------------- 一个图标文件是扩展名为.ICO或者ICON的文件直到现在图标文件还是在计算机程序中随处可见但有时候需要在不失真的情况下放大图标因为ICON本身与JPEG\PNG格式的图形文件差异不大，也是非矢量图形所以图标文件就很难满足这种需求 ---------------

05

WordPress导航菜单图标字体插件font awesome 4 menus纯代码版

换成 Begin 主题之后，大伙都不约而同的给菜单用上了图标字体，确实给博客带来了一定的美化效果。与之配套的是 font awesome 4 menus 这个图标字体插件，其实还是挺小巧的。不过，

05

Hexo插件及Next内置样式集

First add configuration in _config.yml from your hexo project.

01

2021 年 Web 开发常用的五个图标库（建议收藏）

译者：Zz招锦 https://juejin.cn/post/6922416136294252557

01

2021 年 Web 开发常用的五个图标库（建议收藏）

译者：Zz招锦 https://juejin.cn/post/6922416136294252557

03

【Java 进阶篇】手把手教你创建 Bootstrap 旅游网站

随着互联网的普及，旅游行业在全球范围内迅速发展。人们通过网络规划、预订和分享他们的旅行经历。因此，拥有一个令人印象深刻的旅游网站对于吸引游客和提供有用信息至关重要。在本篇博客中，我们将手把手教您如何创建一个令人兴奋的旅游网站，使用流行的前端框架 Bootstrap 来简化整个过程。

05

[EasyUI美化换肤]更换EasyUi图标

本文主要介绍了如何通过修改CSS样式的方式，使用Font-awesome3.2替换EasyUI图标。首先介绍了为什么选择使用Font-awesome3.2，然后介绍了具体的替换步骤，包括查找对应关系、删除背景图样式等。通过这种方法，可以快速实现EasyUI图标的替换，同时保持样式的一致性。

08

get几个小技能：图标库使用技巧，css3文本小技巧

目前自己常用的图标库有两种： 1. 插件、库里面自带的图标库：如 * boostrap * element ui * vant * layui * H-ui * mui 等等这些ui框架官方文档上都有详细的介绍使用说明 2. 常用图标库 * Font Awesome图标库 * iconfont 阿里图标库这些图标库虽然官网都有介绍，但是使用起来并不需要像导入插件、库那样麻烦。下面就来说一下我今天get的小技巧。

02

分享八个免费的Vue图标库，轻松修饰你的应用

图标，是能够吸引访问者注意力并提供更好的感官的好方法。随着Vue的兴起，更多的Vue库正在兴起，以下就为大家推荐几个Vue的图标库。

02

更改形状和背景色、自定义风格、颜色流动…这款词云工具都能做到

stylecloud 是一个 Python 包，它基于流行的 word_cloud 包，并添加了一些有用的功能，从而创建出独特的词云。stylecloud 具备以下特点：

01

第八十四节，css布局小技巧及font-awesome图标使用

font-awesome图标是一个css的插件包，是一个以字体文件方式集成的图标，首先要下载插件包

02

html5之自定义视频播放器

自定义样式的视频播放器效果代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="v

03

vue element-ui 图标选择组件vue-fontawesome-elementui-icon-picker

简洁大方，专为element-ui和font-awesome图标库开发的图标选择组件，希望大家喜欢！

01

彰显个性│博客园的自定义主题「建议收藏」

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/170862.html原文链接：https://javaforall.cn

01

vue-html5-editor开发Vue富文本

该富文本的配置较多，所以单独建了个htmlEditor.js的文件夹然后引到main.js中去

01

实现消息提示组件

在浏览器页面中，通用的消息提示组件一般可以分为静态局部提示和动态全局提示，用于反馈用户需要关注的信息，使用频率较高。

01

ASP.NET MVC5+EF6+EasyUI 后台管理系统（52）-美化EasyUI皮肤和图标

我很久以前就想更新系统的皮肤功能，Easyui 自带的皮肤已经无法满足客户的审美。皮肤颜色来源于AdminLTE系统。我的颜色全部都这里取的。，所以一共取了11个颜色。1个皮肤=2个banner颜色

05

三个Bootstrap免费字体和图标库

前言：Bootstrap 简洁、直观、强悍、移动设备优先的前端开发框架,让web开发更迅速、简单，深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好、更快，组件无数可复用的组件,包括字体图标，在网页制作中我们经常用到小图标(icon),在Bootstrap中提供了很多这种小图标,在这篇内容中,我们把这套框架上的免费字体图标做了个小整合(当然,以后还会不断的更新) Font Awesome 官方网址：http://fontawesome.io/ http://font

04

关于flask入门教程-整体框架

inspinia admin 最新版 bootstrap 完全响应式后台管理模板，采用扁平化设计。使用Bootstrap 3+ Framework，HTML5和CSS3，等技术开发而成。

01

e-icon-picker v2.0.10 已发布，全新ts支持

e-icon-picker v2.0.10 已发布，更新日志： 1. 全自定义组件，不在依赖element-plus。 2. 新增element-plus图标组件支持。 3. 新增ts支持。 4. 修复css样式影响问题。 5. 修复zIndex异常问题。 6. 新增antd图标。 7. 新增arcoVueIcon图标。 8. 新增tdesignIcons图标。 9. 更新依赖。 image image image image image 安装 npm install e-i

03

Vue项目中优雅使用icon

icon在我们前端日常开发中是很常用的，它有很多种使用方式，时至今日，它的使用方式经过了很多种演变，本文会为大家介绍icon的一些历史演变，分析一下这几种使用方式的优劣，我们将采用svg sprites这种方式使用icon，演示代码使用vue+vue-cli3+，看完之后，你会发现这种使用方式完全称得上优雅二字

02

html+原生js制作一个简易音乐播放器

下面这些按钮是导入了字体图标库font-awesome 4.7.0 ，需要自己引入

01

04-移动端开发教程-在线字体

在IE4开始微软就已经开始支持在线字体，不过没有流行起来，直到CSS3新增加了font-face模块，正式纳入了web开发的标准。也渐渐流行起来而且发掘了很多其他应用。 1. 为什么要用在线字体问题精灵图（雪碧图）用作背景的时候不能轻易的放大缩小。低质量的位图在高清设备上放大后会有难看的锯齿，无法满足响应式页面的开发需求在线字体带来的革命：在线字体本质就是文字，但是也可是像图形的文字。节省了带宽（相比图片）字体文件大小也不大（一般几百k）。在线字体本身是矢量的，放大缩小都不会失真可以灵活的通过

06

Font-Awesome（一套绝佳的图标字体库和CSS框架）

官方链接至 http://fontawesome.dashgame.com/ 它跟阿里矢量库不同的是他不需要引入一些繁琐的文件只需要几个命令就可以直接使用icon图标方法一 : css导入 <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css"> 方法二: 定义安装 npm install font-awesome-sass 复制 font-awesome/ 目录到您的项目中。打开 font-awesome/less/variables.less 文件或 font-awesome/scss/_variables.scss文件，然后修改 @fa-font-path 或 $fa-font-path 为您的字体目录

00

04-移动端开发教程-在线字体图标

本文主要介绍了在移动端网页开发中，如何利用web font和自定义字体实现字体图标。首先介绍了字体图标的原理和分类，然后介绍了如何在移动端网页中使用字体图标。最后列举了几个常用的字体图标工具，以及如何在这些工具中使用自定义字体。

06

每日分享html特效篇之一个菜单栏、一个渐变背景、一个加载特效、七个导航栏特效

1.前端工程师主要利用HMTL与CSS建构页面（其中html构建骨架，css构建样式），用JavaScript获取后端数据以及完善交互以及用户体验。 2.通俗来讲，前端在一个项目里，拿到UI设计师设计的设计稿，然后实现UI设计师设计稿，调用后端程序员给的数据接口以获取数据，然后测试，最后部署上线。 3.前端可以对设计图负责,大部分情况下,不需要特别的去理解业务逻辑,因为我们90后都是玩着十几年手机电脑长大的,十几年的经验足够我们在潜意识里想明白应该怎么做,怎么去一步步实现,会有什么意外情况。 4.我感觉前端发展有个很大的缺陷----晋升问题. 正如第三点所言,作为领导必须对项目有足够的了解,显然是要重点包括业务逻辑,这点上,后端开发者需要涉及数据库逻辑,是必须要跟业务逻辑打交道的(重中之重),因此,大部分的领导岗位都是后端开发者更有晋升的机会。当然,个别公司有专门的前端组长(这也不算什么),如果说前端开发者在自己工作范围之外还要腾出时间去研究业务逻辑,属实是觉得出力不讨好(因为这样的操作需要持续很久才能看出效果),而且再怎么研究业务逻辑也不会比每时每刻跟业务逻辑打交道的后端开发者了解更多。说实在的,大部分情况下,前端在配合后端进行开发.后端需要了解业务逻辑,要跟领导和客户商量细节,露脸机会很大,在老板面前刷脸次数众多。这些都是拉开前后端程序员晋升机会差距的因素。

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭