首页
学习
活动
专区
工具
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.5K40
  • 【实战】Vue.js 图标选择组件开发

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

    3.3K10

    将博客主题替换成 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 由于我们在视图模板中引入了专辑封面和文章封面图,

    74320

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

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

    73230

    第八章:购物车案例

    ,大大减小了依赖的体积,优化了应用的性能,本文讲解如何在Vue中使用Font Awesome 5版本。...: import Vue from 'vue'; //引入fontawesomeIcon需要使用的依赖项 import { library } from '@fortawesome/fontawesome-svg-core...$mount('#app'); 刚才图标的class中的fas代表solid风格,fa-user是这个图标的名称,所以我们在第四行引入它: import { faUser, } from '@...="['fas', 'user']"> 其中font-awesome-icon是我们刚刚注册好的组件名,:icon属性是一个数组,用来指定具体图标,刚刚的class...中有两个属性,分别是fas和fa-user,第一个fas保留,第二个fa-user去掉开头的fa-保留剩下的,作为数组的两个元素,就可以正确指定我们要的图标了。

    12210

    基于Butterfly的外挂标签引入

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

    42850

    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

    31.1K65

    【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 国际许可协议 进行许可。

    78930

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

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

    77021

    个人博客搭建

    以下是常用社交图标的标识,供你参考: 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.3K140

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

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

    16600
    领券