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

可以使用jQuery在2个FontAwesome 5图标(常规和实心)之间切换

可以使用jQuery的toggleClass()方法来在两个FontAwesome 5图标之间切换。该方法可以在元素上添加或删除一个或多个类。

首先,确保已经引入了FontAwesome的CSS文件和jQuery库。然后,可以使用以下代码实现图标的切换:

HTML代码:

代码语言:txt
复制
<div id="iconContainer">
  <i id="regularIcon" class="fas fa-star"></i>
  <i id="solidIcon" class="fas fa-star"></i>
</div>

jQuery代码:

代码语言:txt
复制
$(document).ready(function() {
  $('#iconContainer').click(function() {
    $('#regularIcon').toggleClass('fas');
    $('#solidIcon').toggleClass('fas');
    $('#regularIcon').toggleClass('far');
    $('#solidIcon').toggleClass('fas');
  });
});

上述代码中,我们使用了toggleClass()方法来在两个图标之间切换类名。通过切换fasfar类,我们可以在常规图标和实心图标之间进行切换。

推荐的腾讯云相关产品:腾讯云对象存储(COS)

  • 链接地址:https://cloud.tencent.com/product/cos
  • 优势:腾讯云对象存储(COS)是一种高扩展性、低成本的云端对象存储服务,适用于存储和处理任意类型的文件和媒体内容。它具有高可靠性、高可用性和高性能,并提供了丰富的API和工具,方便开发者进行文件的上传、下载、管理和分享。
  • 应用场景:腾讯云对象存储(COS)可以广泛应用于网站、移动应用、大数据分析、多媒体处理等场景,用于存储和管理用户上传的文件、图片、视频等数据。

注意:本回答仅提供了一个示例,实际应用中可能需要根据具体需求进行修改和扩展。

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

相关·内容

前端工程师如何干掉设计

将刚刚下载的动作文件载入即可   (3)使用动作   载入完成后,打开任一psd文件,步骤如下:   a.首先我们选择“移动工具”,将“自动选择”勾选   b.点击我们要切的图标图层面板中我们可以看到对应的图层已经被定位到...(3)fontawesome图标库:http://fontawesome.io/   fontawesome是一个以导入CSS文件的形式加载的图标库,适合中后台项目的开发使用。...,所以我们可以直接拿过来参考使用,对于我们网站的原型制作很有帮助,当然这也是缺乏设计师的情况下前端能够快速实现页面设计的捷径。   ...学UI网:http://www.xueui.cn/  库框架使用   这里的框架主要指的是前端开发中的UI框架,合理的利用UI框架可以美化页面的同时提高工作效率开发成本。   ...(3)jQuery-ui:http://jqueryui.com/   jQuery-ui是jQuery的官方UI库,其提高CSS样式美化的同时也提供了一系列的JS组件供开发者使用,同时也支持定制功能

2.1K40

Categories Magnet

点击查看更新记录 更新记录 2020-12-19:内测版v3.1 基于冰老师的磁贴方案进行修改(1.02.0为冰老师编写) 修改了样式,转为styl 磁贴信息不再自动获取,转为手动填写 无需再引入jquery...可以看做全新的磁贴教程。 使用纯CSS仿写原版磁贴样式。 无需引入任何额外js。 完美支持pjax。 自动获取分类和文章数。 自定义配置行数。可选三列还是四列。 磁贴只显示一级分类。...2021-01-20:正式版v4.1 篇数图标使用fontawesome的Unicode实现伪类显示图标 2021-01-31:正式版v4.1.1 新增butterfly_v3.6.0提示 点击查看参考教程...当前4.0版本可以自动获取分类及文章数。封面描述配置项直接嵌入配置文件。支持自定义行数,超过自动切换为滚动显示。可选择三列或四列显示。...3.0旧版资源(不建议) 4.0新版资源(推荐) 预览效果 3.0磁贴旧版内容 旧版教程需要手动填写,不建议使用 [Blogroot]\themes\butterfly\layout\includes

1.3K10

【推荐收藏】介绍2种Python绘制词云的手法,你会偷偷pick谁呢?

更多参数设置说明 另外,进行词云绘制时,还有很多别的参数大家可以自行摸索,让你的词云图更加有个性。...大家可以去它的网站了解详情: https://fontawesome.dashgame.com/ stylecloud有一个fontawesome.min.css文件包含了巨量的图标,你可以定期到官方网站获取最新的图标库来更新...默认蒙版库文件 搜寻想要的图标 大家还可以去以下两个地址搜索你想要的蒙版图标(icon)名称,然后复制图标名称如蔬菜水果中的苹果图标名称apple-alt。...https://fa5.dashgame.com/#/%E5%9B%BE%E6%A0%87 https://fontawesome.com/icons?d=gallery ?...苹果注意: 需要关注的是图标前缀存在三种:fas(实心)、far(常规)fab(品牌)。大家设置的时候一定要注意,比如我搜索apple-alt就是实心fas,大家在网站上是可以找到分类的。 ?

67120

基于SpringBoot 的CMS系统,拿去开发企业官网真香

今天给大家推荐的这个项目—— MCMS是因为使用手册、部署手册非常完善,项目也有教程视频,对小白非常贴心,接私活可以直接拿去二开非常舒服。...scope>provided 商用 基于MIT开源协议,可直接商用无需授权,但请尊重开源精神,不要去掉代码中铭飞团队(该开源作品的作者)的注释版权信息...,用户可以MStore下载对应的插件,如:站群插件、微信插件、商城插件等; 每月更新:铭飞团队承诺每月28日为系统升级日,分享更多好用等模版与插件; 文档丰富:为了让用户更快速的使用这套系统进行开发,...; 学习者:初学JAVA的同学可以下载源代码来进行学习交流; 开发环境 建议开发者使用以下环境,这样避免版本带来的问题 Windows、Linux Eclipse、Idea Mysql≧5.7 JDK≧...http://fontawesome.io/ Waves 点击效果插件 https://github.com/fians/Waves/ zTree 树插件 http://www.treejs.cn/v3

2.4K20

将博客主题替换成 Clean Blog

2、下载相关依赖库 这里,我们选择使用 Clean Blog 作为博客主题,这是一个基于 Bootstrap 框架的免费主题,不同于以往下载主题包及关联前端资源文件到本地再引入,我们现在可以直接通过 NPM...window.jQuery = require('jquery') require('bootstrap/dist/js/bootstrap.bundle') 主要是 jQuery Bootstrap...中引入渲染图标。...5、编译前端资源文件 完成以上编码后就可以项目根目录下执行 npm run dev 编译打包前端资源了: ? 编译成功后,就可以 public 目录下看到对应的新文件了: ?...7、演示最终效果 完成视图模板代码重构后,就可以浏览器中访问替换主题后的博客首页了: ? ? ? 下篇教程,我们将演示联系表单页面构建以及将表单数据传递给后端进行验证存储。

72020

适合前端开发 UI 设计的20多个最佳 ICON 库

该网站上,我们可以找到有关如何启动自定义产品的完整文档各种指南。 我们只需将链接粘贴到网站上即可开始使用该产品。...Smashicons 的工作方式与其他产品略有不同:其定价基于每月5美元的月度计划。 这意味着您每月只需支付5美元,就可以访问他们现有图标的整个集合以及他们发布的任何将来的图标。...亮点: SVG、PNG HTML 格式 提供各种样式的图标,例如线性图标实心图标全彩色 所有图标可以通过.zip文件下载 下载前可编辑 免费付费订阅选项 Icomoon 网址:https:/...自然,它们是完全免费的,并且可以GitHub上使用。 我们甚至可以使用CDN版本的样式表将这些图标直接添加到的站点中,它也支持 SVG Web 字体。...这也是引导时为团队设置的默认图标。 它还可以作为SVG图标以及其他格式使用。该许可证对任何商业或个人用途都是免费的。 每个图标都是完全可伸缩的,并且可以直接在CSS中维护。

2.8K20

Axure RP8入门之基本操作篇

### 24.设置图片文本 设置图片文本需要在图片上点击,选择【编辑文本】,方可进行图片上的文字编辑 ### 25.切割/裁剪图片 图片的元件属性中,设有切割裁剪功能的图标,点击即可使用相应功能...### 30.载入元件库 除了使用软件自带的默认元件库与流程图元件库,用户还可以加载自定义元件库。加载自定义元件库只需点击功能图标列表中选择【载入元件库】。...### 31.切换元件库 元件库功能面板中,可以通过点击元件库列表,选择不同的元件库进行使用。 ## 第二章 页面设置 ### 32.设置页面居中 页面【样式】设置中选择页面居中的按钮。...### 34.设置页面颜色(草图/黑白) 页面的【样式】中,可以将当前页面的显示为草图效果,同时可以将页面颜色彩色与黑白之间转换。...自适应视图【项目】-【自适应视图】中进行设置。 ## 第六章 查看原型 ### 49.快速预览查看原型 预览原型的快捷键为键。或者,点击快捷功能中的预览图标进行预览。

5K30

Power BI 切片器可视化探索

图标填充效果 当选中元素时,圆圈由空心变为实心。依然是填充图像,按钮状态为默认时填充一个空心圆SVG图标,选定状态时填充一个实心图标。 圆形图标可以自己用PPT画,也可以字节跳动的资源库下载。...该图标库支持在线编辑,你可以空心效果实心效果分别下载一个。...修改办法很简单,使用在线SVG编辑服务将圆圈右边留白。 比如原图像大小为48*48,可以修改为200*48,与切片器长宽比大致相同。这样修改后的圆圈切片器会自动显示为左边。...勾选效果 勾选的原理上方圆圈填充相同,默认状态添加空心正方形图标,选定状态添加对勾正方形图标,下图示例图标同样来源于字节跳动。...有人可能会问,既然是要切换图标,为什么不直接在图像模块下添加图标,而是填充图像下?这是因为图像模块的图标目前不支持切换,所有状态只能是相同图标。 以上是个引子,更多好玩的用法可以自行探索。

26030

前端实践:你要会用!

类库框架,你值得拥有: 欢迎共同交流前端技术 、 首先,jquery一定是大部分web前端开发者不可或缺的工具。...利用jquery不仅仅停留在只使用它的API插件上,还可以会自己去写jquery插件,还可以去读jquery的源码、了解jquery的设计思路。如果你也能那样做,你会收获到意想不到的效果。...fontAwesome是全世界最强大的图标系统。相比于css制作图标来说,这个要好很多倍,不管是开发、效率还是维护上。 requirejsseajs这种模块定义系统,也一定是你系统中不可或缺的。...浏览器环境下,最重要的两点是:web安全性能优化。需要注意的图中都有列出来哟,很基础但是也很重要哟。...除了文章中列出来的知识,在工作中你可能还需要以下的小伎俩哟,让你的leader对你赞赏有加: 要了解敏捷软件开发流程(如SCRUM)项目管理知识(如PMP),这也属于一种“软”知识吧; 要学会在网上别人交流

628100

LVGL的多语言转换工具--MCU_Font_Release

3.图标字符提取 要使用图标字体需要到 FontAwesome 官网下载该图标字体并安装后,便可在 MCU_Font 工具里选择该字体。...(V2.0版本中单击相应的图标单元格,软件将自动把字符拷贝到系统剪切板中) 4.定制图标 (版本V2.0新增功能) 当字体图标 FontAwesome 中没有我们想要的图标时,我们可以使用定制图标功能来制作自己的图标字体...(排在前面的优先级高,我们将定制图标放在最前) 接下来我们主界面中将字体切换到字体1即图标字体,然后点击字库浏览。...(unicode编码E000-F8FF为私有区域,可以自定义使用,F000 之后的已被图标字体FontAwesome使用,因此我们的定制图标默认从E000开始) 如下图添加了5张图片。...7.软件获取地址 本软件如对你有帮助,你可以 gitee 上查看使用说明,获取新版本或者给我留言。

2.1K20

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

FontAwesome字体图标库的使用 自定义标题栏按钮,可点击图标关闭窗口,手动更新等 4.API 接口说明 所使用到的几个接口地址: 根据请求的IP地址,返回定位的城市名称经纬度 http://...page=0 5.多个接口数据的获取和解析 上一个版本最大的区别就是,上一版只使用了1个API。...FontAwesome字体图标库的使用 在这次新版本中,我首次使用FontAwesome字体图标库,图标显示效果: ? 使用起来非常方便,简单。...: rgb(0, 255, 0);"); } 其中0xf0e7是图标对应的代码,可以官网上找到。...目前,图标库里包括675个图标,而且是矢量的,这意味着可以随意的缩放而不用担心不清晰,大小颜色都可以代码里设置。 ?

87920

github pages + Hexo + 域名绑定搭建个人博客增强版

基本搭建请访问:http://blog.csdn.net/xiangzhihong8/article/details/53355036 主题配置介绍 从中我们也可以看出,对于主题来讲,大部分可以配置的地方其实都是在这里的...,具体百度统计的使用可以查看百度统计官网:http://tongji.baidu.com。...favicon: /favicon.png # Internationalization | 主题语言 ## Change Language in SITE's _config.yml | 站点配置中切换语言...in `/yelee/source/background/` ## "5": 显示`/yelee/source/background/`文件夹中 bg-1.jpg 到 bg-5.jpg 这5张图片 ##...,多个关键词用英文逗号隔开 文章图片的存放 想要在文章中插入图片的话,可以按照Markdown语法来插入,图片的存放有两种方式:本地D:\Hexo\source目录下新建一个存放图片的文件夹,比如images

1.3K80

从iOS 11 UI Kit中谈谈iOS 11的新变化

如果你想要打造顶层是标签栏结构的APP,这种设计规范就会非常适合,使用粗体大标题能够让用户大量的标签切换中快速地意识到自己目前所处在的位置; ?...尤其是对于内容丰富的APP,大量的页面各种深度的结构层次,使用大标题后,相信可以起到很好的页面引导作用。 ?...这样的话,设计元素元素之间保持足够的间距,可以减少用来区分层级关系的不必要装饰元素。 ?...系统图标中,状态栏讯号强度从•••••改回阶梯式,电量图标的线面比例变得更均衡一些,标签栏图标从空心/实心两态变成全实心粗线条设计,配合整体设计调性。 ?...2、原型设计 使用Sketch设计完基于iOS 11系统的静态视觉稿后,想要对设计稿进行进一步的交互设计团队协作的话,推荐Sketch中安装Mockplus插件,结合Mockplus就可以轻松将

1K90
领券