之前博主分享过
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" 图标为例讲解如何将其引入自己的网站
<i class="fas fa-camera"></i> //前缀是fas 图标为camera,图标前必须添加"fa-"
<i class="fas fa-camera"></i> //可以使用i标签把图标放到你想显示的位置
<span class="fas fa-camera"></span> //你也可以使用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。
<i class="fas fa-camera fa-sm"></i>
<i class="fas fa-camera fa-lg"></i>
<i class="fas fa-camera fa-2x"></i>
<i class="fas fa-camera fa-3x"></i>
<i class="fas fa-camera fa-5x"></i>
<i class="fas fa-camera fa-7x"></i>
<i class="fas fa-camera fa-10x"></i>
尺码细节表
类 | 尺寸 | 其他注意事项 |
---|---|---|
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 |
使图标旋转
<i class="fas fa-snowboarding"></i>
<i class="fas fa-snowboarding fa-rotate-90"></i>
<i class="fas fa-snowboarding fa-rotate-180"></i>
<i class="fas fa-snowboarding fa-rotate-270"></i>
<i class="fas fa-snowboarding fa-flip-horizontal"></i>
<i class="fas fa-snowboarding fa-flip-vertical"></i>
<i class="fas fa-snowboarding fa-flip-both"></i>
旋转类型
类名 | 旋转度数 |
---|---|
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) |
动画旋转
<i class="fas fa-spinner fa-spin"></i>
<i class="fas fa-circle-notch fa-spin"></i>
<i class="fas fa-sync fa-spin"></i>
<i class="fas fa-cog fa-spin"></i>
<i class="fas fa-spinner fa-pulse"></i>
<i class="fas fa-stroopwafel fa-spin"></i>
双色调图标
<i class="fas fa-square fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-2x">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-flag fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-2x">
<i class="fas fa-square fa-stack-2x"></i>
<i class="fas fa-terminal fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-4x">
<i class="fas fa-square fa-stack-2x"></i>
<i class="fas fa-terminal fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-2x">
<i class="fas fa-camera fa-stack-1x"></i>
<i class="fas fa-ban fa-stack-2x" style="color:Tomato"></i>
好了,本篇教程就到这里,有不懂得地方欢迎评论区留言哦!
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、本资源存储在云盘,如发现链接失效,请 我们会第一时间更新。