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

如何使用图标的"fas“”远“"fal”"fab“类型的fontawesome闪亮?

FontAwesome是一个非常流行的图标库,提供了大量的图标供开发者使用。其中,图标的类型包括"fas"、"far"、"fal"和"fab"。

  1. "fas"类型的图标(Solid Icons):这些图标是实心的,适用于大多数场景,如文件、用户、箭头等。你可以通过在HTML中使用<i>标签,并添加class为"fas"和对应的图标名称来使用这些图标。例如,要使用一个名为"fa-check"的实心勾选图标,可以使用以下代码:
代码语言:txt
复制
<i class="fas fa-check"></i>

推荐的腾讯云相关产品:腾讯云对象存储(COS),它是一种高扩展性、低成本的云端存储服务,适用于存储和处理大规模非结构化数据。产品介绍链接地址:https://cloud.tencent.com/product/cos

  1. "far"类型的图标(Regular Icons):这些图标是轮廓型的,适用于需要较为轻量级的图标,如星星、心形等。使用方法与"fas"类型的图标相同,只需将class改为"far"。例如,要使用一个名为"fa-star"的轮廓型星星图标,可以使用以下代码:
代码语言:txt
复制
<i class="far fa-star"></i>

推荐的腾讯云相关产品:腾讯云云服务器(CVM),它是一种可弹性伸缩的云端计算服务,提供了高性能、高可靠性的虚拟服务器。产品介绍链接地址:https://cloud.tencent.com/product/cvm

  1. "fal"类型的图标(Light Icons):这些图标是细线型的,适用于需要更加轻盈的图标,如灯泡、书签等。使用方法与前两种类型的图标相同,只需将class改为"fal"。例如,要使用一个名为"fa-lightbulb"的细线型灯泡图标,可以使用以下代码:
代码语言:txt
复制
<i class="fal fa-lightbulb"></i>

推荐的腾讯云相关产品:腾讯云云函数(SCF),它是一种事件驱动的无服务器计算服务,可帮助开发者更轻松地构建和管理应用程序。产品介绍链接地址:https://cloud.tencent.com/product/scf

  1. "fab"类型的图标(Brand Icons):这些图标代表了各种品牌的图标,如Facebook、Twitter等。使用方法与前三种类型的图标相同,只需将class改为"fab"。例如,要使用一个名为"fa-facebook"的Facebook图标,可以使用以下代码:
代码语言:txt
复制
<i class="fab fa-facebook"></i>

推荐的腾讯云相关产品:腾讯云云开发(CloudBase),它是一种全栈云原生应用开发平台,提供了云端一体化开发、部署和运维能力。产品介绍链接地址:https://cloud.tencent.com/product/tcb

通过使用这些不同类型的FontAwesome图标,你可以轻松地为你的网站或应用程序增添丰富的图标元素,提升用户体验和界面美观性。

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

相关·内容

一款高颜值词云包让我拍案叫绝

stylecloud简介 对我而言,平时python制作词云主要使用wordcloud,如果在可视化过程还要用Pyecharts做其他,那么词云也干脆就用Pyecharts制作了。...打开发现里面包含很多图标的代码,具体长什么样呢? ?...fontawesome.min.css文件内容 多亏有中文网站分门别类罗列了图标的样子和名字, 比如:https://fontawesome.dashgame.com/ 它最新版地址:https://fa5...非常多图标 使用方法如下: ? 如果我们想要使用小狗蒙版,只需先查找到它图标名字fa-dog,再加入到参数中icon_name='fas fa-dog'即可。...封面中 对于颜值要求稍微高一点同学,可以使用Adobe Photoshop、Adobe Illustrator继续美化图片呦!

1.4K40

【实战】Vue.js 图标选择组件开发

image.png 设置图标不难,方案就是字体图标,可供使用图标库也有很多,比如阿里巴巴 Iconfont,以及 Fontaswsome 等,问题在于如何优雅提供几百个图标供用户选择,而不需要开发去一个一个写标签...字体图标库 Fontawesome 方案 我们使用字体图标的方式,一般是一个 这样标签,平常开发中用一些图标都是用到一个写一个,展示...在项目中本人使用Fontawesome 图标库方案,使用它是因为提供可用图标比较丰富,基本上不需要特意去找合适图标,直接把它图标库下载过来,免费有800多个。...Fontawesome 下载后文件中提供一个 svg格式精灵,这个非常人性化,用 VSCode 打开这个SVG文件 image.png 可以看到是熟悉DOM,因为SVG本质上就是一个XML,既然是...使用方式是:。

3.2K10

将博客主题替换成 Clean Blog

2、下载相关依赖库 这里,我们选择使用 Clean Blog 作为博客主题,这是一个基于 Bootstrap 框架免费主题,不同于以往下载主题包及关联前端资源文件到本地再引入,我们现在可以直接通过 NPM.../css/all.css', 'public/css/fontawesome.css') mix 支持流式 API,所以可以直接以方法链形式调用 sass 方法将 resources/sass/app.scss...当然,你可以像调用 copy 方法那样另起一行单独调用,该方法作用是将 fontawesome 样式文件 all.css 拷贝到 public/css/fontawesome.css 以便在 HTML...app.css、fontawesome.css 文件。...github.com/nonfu/master-laravel-code/blob/v1.0/practice/blog/resources/views/post.php 由于我们在视图模板中引入了专辑封面和文章封面

72020

【HTML | CSS | JAVASCRIPT】一款可交互响应式登陆注册表单,你确定不来看看嘛(附源码)

在学习工作中,我通常使用偏后端开发语言ABAP,SQL进行任务完成,对SAP企业管理系统,SAP ABAP开发和数据库具有较深入研究。...---- 实现思路   看完效果后,各位小伙伴们肯定很想知道实现思路,接下来我将分步骤逐一进行讲解,如果想要获取源码小伙伴可以跳过该部分,直接前往最后完整源码章节!...其次JAVASCRIPT代码还需要分别控制【登录】|【注册】表单z-index属性来完成表单切换功能。 PS:让我们缩小屏幕比例来观察一下切换表单功能是如何完成吧!   ...媒介查询让CSS可以更精确作用于不同媒介类型和同一媒介不同条件。媒介查询大部分媒介特性都接受min和max用于表达”大于或等于”和”小于或等于”。...svg图片修改   找到两个svgsrc,修改svg图片链接。

64430

基于Butterfly外挂标签引入

只不过这里tip.js是我自己写,所以我清楚它会怎么被渲染成html,才用这个写法。可以熟读文档,使用html语言来编写其他标签类型。...github卡片 ghcard ghcard使用了github-readme-statsAPI,支持直接使用markdown语法来写。...title:徽标的额外信息,可选参数。主要用于优化 SEO,但 object 标签不会像 a 标签一样在鼠标悬停显示 title 信息。...可根据需要插入到相应md。无需再自己配置长宽。建议在粘贴时故意使用长短、大小、横竖不一图片,会有更好效果。...[@icon]: FontAwesome图标名称(全名,看起来像“ fas fa-font”) 可以指定带空格或不带空格; 例如’Tab caption @icon’ 和 ‘Tab caption@icon

31750

Hexo+Github 博客搭建之 Matery 主题安装配置篇

(文章无特色图片时会有 24 张漂亮图片代替) 时间轴式归档页 词云标签页和雷达分类页 丰富关于我页面(包括关于我、文章统计、我项目、我技能、相册等) 可自定义数据友情链接页面 支持文章置顶和文章打赏...修改地方在主题文件 /layout/_partial/footer.ejs 文件中,包括站点、使用主题、访问量等。...以下是常用社交图标的标识,供你参考: Facebook: fab fa-facebook Twitter: fab fa-twitter Google-plus: fab fa-google-plus...fab fa-weibo Wechat: fab fa-weixin QQ: fab fa-qq Zhihu: fab fa-zhihu 注意: 本主题中使用 Font Awesome 版本为 5.11.0...webkit-keyframes rainbow { /* 动态切换背景颜色. */ } @keyframes rainbow { /* 动态切换背景颜色. */ } 修改 banner 和文章特色

1.2K30

Python数据可视化 词云图 绘制词云方法总结

四、stylecloud库绘制词云 1. stylecloud简介 对自己而言,平时用python制作词云主要使用wordcloud,如果在可视化过程还要用pyecharts绘制其他,那么词云也干脆就用...网址链接:https://fontawesome.com/license/free 在stylecloud \ static文件夹下,有一个 fontawesome.min css文件包含了大量图标...,打开查看里面的内容,发现其中包含很多图标的代码。...png] 比如要使用苹果商标的蒙版图片,样式前缀 fab,以 fa-为前缀名称 fa-apple,设置icon_name参数,icon_name='fab fa-apple’即可。...file_path:输入文本/CSV 文件路径 icon_name:stylecloud 形状图标名称(如 fas fa-grin-beam),default: fas fa-flag palette

29.9K65

【Hexo】Hexo 主题 Matery 配置

说明 前两篇文章介绍了 Hexo + github pages + travis ci 进行自动化部署,并介绍了 Hexo 配置文件中各个属性,相信通过前两篇文章学习,你已经学会了如何搭建自己博客...这一篇将以 Matery 这款主题为例,说明一下主题应该如何配置。包括主题配置、插件设置、注意事项等。...以下是常用社交图标的标识,供你参考: Facebook: fab fa-facebook Twitter: fab fa-twitter Google-plus: fab fa-google-plus...中 author 文章作者 img featureImages 中某个值 文章特征,推荐使用床(腾讯云、七牛云、又拍云等)来做图片路径.如: http://xxx.com/xxx.jpg top...注意: 如果 img 属性不填写的话,文章特色会根据文章标题 hashcode 值取余,然后选取主题中对应特色图片,从而达到让所有文章都特色各有特色。

1.9K10

个人博客建设——Hexo主题icarus_config.icarus.yml配置参数注释

于是乎我又准备重新建一个项目,并在其基础上更换一套新模板,并与Typore中.md文件进行使用尝试,近期这几篇可能就是这个系列来进行了。...正文 本篇用于记录我在Hexo个人博客中使用icarus主题中配置文件,为了方便使用该主题小伙伴们进行配置,我根据该主题提供一些说明进行整理到了配置文件中,方便英语弱小伙伴使用。...: standalone # 可以作为不同上下文应用程序图标的图像文件 icons: - # 映像文件路径...src: '' # 包含空格分隔图像维数字符串 sizes: '' # 关于图像媒体类型提示...icon font CDN provider iconcdn: fontawesome 本文声明: 本作品由 cn華少 采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。

72530

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

添加蒙版图形状后效果 1.4....其核心主要在 配色方案 和 蒙版方案 上,其配色方案是让词云图更美观优雅点,只能使用其提供蒙版方案上我觉得反而让自由空间变小了,所以今天我们会介绍如何自定义蒙版!...大家可以去它网站了解详情: https://fontawesome.dashgame.com/ 在stylecloud有一个fontawesome.min.css文件包含了巨量图标,你可以定期到官方网站获取最新图标库来更新...苹果注意: 需要关注是图标前缀存在三种:fas(实心)、far(常规)和fab(品牌)。大家在设置时候一定要注意,比如我搜索apple-alt就是实心fas,大家在网站上是可以找到分类。 ?...图标前缀类型 2.4. 如何自定义蒙版图 通过上面的例子,我们发现stylecloud提供蒙版功能只能选择它所固有的,如果我想自定义设置任意蒙版效果,该如何下手呢?

67520

个人博客搭建

以下是常用社交图标的标识,供你参考: Facebook: fab fa-facebook Twitter: fab fa-twitter Google-plus: fab fa-google-plus...fab fa-weibo Wechat: fab fa-weixin QQ: fab fa-qq Zhihu: fab fa-zhihu 注意: 本主题中使用 Font Awesome 版本为 5.11.0...中 author 文章作者 img featureImages 中某个值 文章特征,推荐使用床(腾讯云、七牛云、又拍云等)来做图片路径.如: http://xxx.com/xxx.jpg top...注意: 如果 img 属性不填写的话,文章特色会根据文章标题 hashcode 值取余,然后选取主题中对应特色图片,从而达到让所有文章都特色各有特色。...当文章没有设置特色时,本主题会根据文章标题 hashcode 值取余,来选择展示对应特色 我认为个人博客应该都有自己风格和特色。

2.2K140

小玩意分享(源码已上传GitHubGitee)

源代码 将准备 txt 文件与以下 php 代码放到我们服务器上,就可以拥有自己随机格言啦,至于如何使用就看自己需求咯! <?...当然你也可以使用网络图片,看自己需求。...源代码地址-Github、源代码地址-Gitee 仿 MacOS 鱼眼菜单 纯 HTML + CSS + JS 实现鱼眼菜单效果,建议配合 FontAwesome 图标库使用,效果更佳!...聊天室 使用 php + WebSocket 实现简易聊天室,包括私聊、群聊、弹窗通知、进入退出聊天室提示等功能… 源代码 由于代码比较复杂,且有 swoole 与 原生 socket 两个版本,请前往...flowChart: true, // 开启流程支持,默认关闭。 sequenceDiagram: true, // 开启时序/序列支持,默认关闭。

14600

python爬取『大年初一』热映电影,以『可视化及词云秀』方式带你了解热映电影

查看网页代码,评论数据目标标签是 (不知道如何分析,可以看上一篇文章python爬取44130条用户观影数据,分析挖掘用户与电影之间隐藏信息...分析 图中电影时长均在120分钟左右 最长电影《唐人街探案3》(136分钟),时长最短是《熊出没·狂野大陆》(99分钟) 电影类型数据可视化 #####2.类型可视化 ###从小到大排序 dict...3.评论数据词云可视化 使用七种不同图案进行词云可视化,因此将绘图代码封装成函数!!!...icon_name = 'fab fa-qq' elif icon == "7": icon_name = 'fas fa-cannabis' "...#狗 # icon_name='fas fa-cat',#猫 # icon_name='fas fa-dove',#鸽子 # icon_name='fab

40720

用腾讯云轻量服务器搭建一个漂亮导航主页

轻量应用服务器(TencentCloud Lighthouse)是新一代开箱即用、面向轻量应用场景云服务器产品,助力中小企业和开发者便捷高效在云端构建网站、小程序/小游戏、电商、云盘/床以及各类开发测试和学习环境...Docker 是一个开源应用容器引擎,让开发者可以打包他们应用以及依赖包到一个可移植容器中,然后发布到任何流行Linux或Windows操作系统机器上,也可以实现虚拟化,容器是完全使用沙箱机制...使用docker来部署应用是非常简单,一般情况下,只需要一行命令即可完成。...这里假设使用Ubuntu系统。...attribute - name: "我github" icon: "fas fa-book" url: "https://github.com/lixiaofei123" #

1.9K150
领券