1. 朴尘轻轩首页
  2. 教程

如何在页面中使用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" 图标为例讲解如何将其引入自己的网站

<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-xs"></i>
<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

使图标旋转

如何在页面中使用Font Awesome v5.x.x字体图标

 

 

 

 

<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>

双色调图标

如何在页面中使用Font Awesome v5.x.x字体图标

<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>

 

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

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、本资源存储在云盘,如发现链接失效,请 点此反馈 我们会第一时间更新。

发表评论

登录后才能评论