Font Awesome 5 页面引入的几种方式和应用

2021年2月21日前端 applek

在做网页开发中,前端页面显示时经常会用到字体库图标,如 iconfont, fontawesome, glyphicons, lonicons等

其中最著名的就是fontawesome了，现在版本已经更新到了5.x

一.fontawesome本质原理

fontawesome本质上是把图标做成了字体文件,一个图标代表一个特殊符号,需要某个图标时也可引用这个字体文件(css文件).如:

.fa-500px:before {
  content: "\f26e"; 
}

.fa-accusoft:before {
  content: "\f369"; 
}

html页面:

<!-- 引入字体图标 -->
<div class="icon">&#xf26e</div>

icon样式:

.icon {
    font-family: FontAwesome;
}

二.fontawesome5的引入方式及与4.x的变化

图表样式: 增加了3中不同的图标样式,对于要使用的图标需要指定图标的名称及对应的前缀 .增加了 fas, fab, fal等.
线框图标: 所有具有线框样式(通常以-o结尾)的图标现在都有一个far前缀,并删除了它们的-o后缀.
图标名称变更: 删除了别名,每个图标都只有一个正式名称.

fontawesome5引入方式

1.基于SVG格式,使用JS调用图标

压缩包中含有v4-shims.js文件。这个是为了兼容4.x版本的升级使用。如果已有4.x版本的项目，想更换成svg图标，那么需要额外调用v4-shims.js或v4-shims.min.js文件。以保证兼容性。

若想引入所有图标:

<script src="all.js"></script>

若只需要引入solid系的图标:

<script src="solid.min.js"></script>
<!-- 在调用solid,brand,regular系js时都要调用的文件 -->
<script src="fontawesome.min.js"></script>

使用js方式调用的图标，最终在DOM中会以svg代码显示图标。

2.基于网页字体,使用CSS调用图标

CSS方法要调用两组文件,一个是css(或less或scss)样式表, 另一组是图标字体文件.即 css方法调用时,实际上要用到的是css文件夹及webfonts文件夹里的文件.

若引入所有图标:

<link rel="stylesheet" href="all.css">

若只想引入brand的图标:

<link rel="stylesheet" href="brands.min.css">
<!-- 在调用solid,brand,regular系css时都要调用的文件 -->
<link rel="stylesheet" href="fontawesome.min.css">

使用css方式调用图标，以网页字体的方式显示，则dom结构内没有svg代码。

3.使用CDN

<!-- Web字体 + CSS -->
<head>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/v4-shims.css">
</head>

<!-- SVG + JS框架 -->
<head>
  <script defer src="https://use.fontawesome.com/releases/v5.11.2/js/all.js"></script>
  <script defer src="https://use.fontawesome.com/releases/v5.11.2/js/v4-shims.js"></script>
</head>

三.fontawesome5怎么使用

fa5图标开始支持svg,svg有更好的表现能力.在标签上喜欢用<i> 来引用.在html页面中起到强调或斜体的文本效果一般会使用<em></em>标签,在语义上也可以使用<span> 标签.

引用一个图标需要指导这两点信息: 1.以fa-为前缀的名称. 2.要使用相应的前缀样式. 注意: fa 前缀在5.x版本中已弃用.新的默认设置是实心的fas样式和品牌的fab样式.

Style	Availability	Style Prefix	Example	Web Font Filename	SVG+JS Filename
实心	免费	fas	`<i class="fas fa-camera"></i>`	fa-solid-900.*	solid.js
品牌	免费	fab	`<i class="fab fa-500px"></i>`	fa-brands-400.*	brands.js
细体	仅专业版	fal	`<i class="fal fa-camera"></i>`	fa-light-300.*	light.js
常规	仅专业版	far	`<i class="far fa-camera-retro"></i>`	fa-regular-400.*	regular.js
双色	仅专业版	fad	`<i class="fad fa-camera"></i>`	900

1.图标尺寸与颜色

fa图标会自动继承css大小和颜色:

<span style="font-size: 48px; color: Dodgerblue;">
  	<i class="fas fa-camera"></i>
</span>

支持调整大小

<div style="font-size: 24px;">
    <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>
</div>

2.图标宽度及列表图标

也可以在引用图标的html元素上添加**fa-fw类 ,将一个或多个图标设置为相同的固定宽度**.在列表或导航菜单中图标对齐非常有用.

<div><i class="fas fa-skating fa-fw" style="background:DodgerBlue"></i> Skating</div>
<div><i class="fas fa-skiing fa-fw" style="background:SkyBlue"></i> Skiing</div>
<div><i class="fas fa-skiing-nordic fa-fw" style="background:DodgerBlue"></i> Nordic Skiing</div>
<div><i class="fas fa-snowboarding fa-fw" style="background:SkyBlue"></i> Snowboarding</div>
<div><i class="fas fa-snowplow fa-fw" style="background:DodgerBlue"></i> Snowplow</div>

列表中的图标: 在固定宽度的垂直对齐基础上添加了一些实用样式.使用 fa-ul 和 fa-li 替换无序列表的默认项目符号.

<ul class="fa-ul">
    <li><span class="fa-li"><i class="fas fa-check-square"></i></span>List icons can</li>
    <li><span class="fa-li"><i class="fas fa-check-square"></i></span>be used to</li>
    <li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li>
    <li><span class="fa-li"><i class="far fa-square"></i></span>in lists</li>
</ul>

3.图标旋转与镜像

引用图标使用 fa-rotate-* 和 fa-flip-*类来实现旋转和翻转图标.

fa-rotate-90 : 90度
fa-rotate-180 : 180度
fa-rotate-279 : 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)

4.图标动画

使用fa-spin 类使任何图标旋转，或者使用fa-pulse使其进行8方向旋转。特别适用于fa-spinner和旋转图标类别中的所有内容。

<div class="fa-3x">
    <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>
</div>

5.图标堆叠

要堆叠多个图标，请在要堆叠的2个图标的父HTML元素上使用fa-stack 类。然后为常规尺寸的图标添加fa-stack-1x 类，为较大的图标添加fa-stack-2x 类。 fa-inverse 可以与fa-stack-1x一起添加到图标中，以帮助实现剔除效果。

<i class="far fa-circle fa-2x"></i>
<span class="fa-stack" style="vertical-align: top;">
  	<i class="far fa-circle fa-stack-2x"></i>
  	<i class="fas fa-flag fa-stack-1x"></i>
</span>
<span class="fa-stack" style="vertical-align: top;">
  	<i class="fas fa-circle fa-stack-2x"></i>
  	<i class="fas fa-flag fa-stack-1x fa-inverse"></i>
</span>