如何在页面中使用Font Awesome v5.x.x字体图标-朴尘轻轩

之前博主分享过

https://pucqx.cn/324.html

原以为大家在使用时没什么问题,但是最近两天有网友评论说升级 5.x.x版本后不会使用了,今天博主就给大家简略说一下Font Awesome v5.x.x字体图标的使用方法!

Font Awesome字体分为桌面版(DeskTop)和网络版(Web),顾名思义,桌面版基本就是开发软件中使用,网络版适合于网页显示,对于站长们来说使用网络版足够了!

所以下面的教程主要围绕网络版来说明

Font Awesome v5.x.x字体图标库分为 :Solid,Regular,Light,Duotone,Brands五种类型,其中Solid,Regular,Light,Brands包含了比较多的免费图标,而Duotone类型只限专业版才可以使用,当然Duotone类型的图标,很多确实比前四种要好看一些!

说明 : fa前缀在版本5.x.x中已弃用。新的默认设置是fas Solid样式和fab Brands样式。

下面,我们以 "camera" 图标为例讲解如何将其引入自己的网站

//前缀是fas 图标为camera,图标前必须添加"fa-"
 //可以使用i标签把图标放到你想显示的位置
 //你也可以使用span标签来达到i标签的目的,但是稍微麻烦一点

下面附一个官方给的说明表格

类型	使用要求	类型前缀	引入方法
Solid	免费	`fas`	`<i class="fas fa-camera"></i>`
Regular	专业版	`far`	`<i class="far fa-camera"></i>`
Ligh	专业版	`fal`	`<i class="fal fa-camera"></i>`
Duotone	专业版	`fad`	`<i class="fad fa-camera"></i>`
Brands	免费	`fab`	`<i class="fab fa-font-awesome"></i>`

由于Font Awesome首次实现并继续支持使用CSS @font-face方法呈现，因此其每种样式都对应于特定的字体粗细：

类型	使用要求	@font-face weight
Solid	免费	900
Regular	专业版	400
Light	专业版	300
Duotone	专业版	900
Brands	免费	400

调整图标大小

图标继承其父容器的font-size，从而使它们可以匹配您可能会使用的任何文本。通过以下类，我们可以相对于Inherited增大或减小图标的大小font-size。

尺码细节表

类	尺寸	其他注意事项
`fa-xs`	.75em
`fa-sm`	.875em
`fa-lg`	1.33em	也适用 `vertical-align: -25%`
`fa-2x`	2em
`fa-3x`	3em
`fa-4x`	4em
`fa-5x`	5em
`fa-6x`	6em
`fa-7x`	7em
`fa-8x`	8em
`fa-9x`	9em
`fa-10x`	10em

使图标旋转

旋转类型

类名	旋转度数
`fa-rotate-90`	90°
`fa-rotate-180`	180°
`fa-rotate-270`	270°
`fa-flip-horizontal`	mirrors icon horizontally
`fa-flip-vertical`	mirrors icon vertically
`fa-flip-both`	mirrors icon vertically and horizontally (requires 5.7.0 or greater)

动画旋转

双色调图标

好了,本篇教程就到这里,有不懂得地方欢迎评论区留言哦!

1、本站名称：朴尘轻轩
2、本站永久地址：https://pucqx.cn
3、本文名称: 如何在页面中使用Font Awesome v5.x.x字体图标
4、本文永久链接: https://pucqx.cn/1272.html
5、本篇文章系 朴尘轻轩 原创,转载请注明出处: https://pucqx.cn/1272.html
6、本资源来源于互联网，安全性未知，使用前请自行甄别
7、本资源来源于互联网，如有侵权请及时联系我们,我们将在72小时内删除侵权内容！
8、本资源存储在云盘，如发现链接失效,请 点此反馈 我们会第一时间更新。