如何在页面中使用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标签的目的,但是稍微麻烦一点

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

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

调整图标大小

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

尺码细节表

使图标旋转

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

旋转类型

动画旋转

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

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