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

原以为大家在使用时没什么问题,但是最近两天有网友评论说升级 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 weightSolid免费900Regular专业版400Light专业版300Duotone专业版900Brands免费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.75emfa-sm.875emfa-lg1.33em也适用 vertical-align: -25%fa-2x2emfa-3x3emfa-4x4emfa-5x5emfa-6x6emfa-7x7emfa-8x8emfa-9x9emfa-10x10em

使图标旋转

<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-9090°fa-rotate-180180°fa-rotate-270270°fa-flip-horizontalmirrors icon horizontallyfa-flip-verticalmirrors icon verticallyfa-flip-bothmirrors 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>

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