Font Awesome5.x 页面引入的几种方式和应用,及与4.x的变化
在做网页开发中,前端页面显示时经常会用到字体库图标,如 iconfont, fontawesome, glyphicons, lonicons等.下面是各字体图标的网站:
- iconfont
- fontawesome5.11 或 fontawesome5.12 和 fontawesome4.7 或 fontawesome4.7
- glyphicons
- lonicons
这篇文章主要介绍fontawesome5的使用及与fontawesome4的变化.
一.fontawesome本质原理
fontawesome本质上是把图标做成了字体文件,一个图标代表一个特殊符号,需要某个图标时也可引用这个字体文件(css文件).如:
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
readers do not read off random characters that represent icons */
.fa-500px:before {
content: "\f26e"; }
content: "\f368"; }
.fa-accusoft:before {
content: "\f369"; }
html页面:
<div class="icon">div>
icon样式:
.icon {
font-family: FontAwesome;
}
上文代码只是说明fontawesom的字体原理,并不代表实际引入方法.
二.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>
<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">
<link rel="stylesheet" href="fontawesome.min.css">
使用css方式调用图标，以网页字体的方式显示，则dom结构内没有svg代码。
3.使用CDN
<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>
<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有更好的表现能力.在标签上喜欢用 来引用.在html页面中起到强调或斜体的文本效果一般会使用标签,在语义上也可以使用 标签.
引用一个图标需要指导这两点信息: 1.以fa-为前缀的名称. 2.要使用相应的前缀样式. 注意: fa 前缀在5.x版本中已弃用.新的默认设置是实心的fas样式和品牌的fab样式.
| Style | Availability | Style Prefix | Example | Web Font Filename | SVG+JS Filename |
|---|---|---|---|---|---|
| 实心 | 免费 | fas | |
fa-solid-900.* | solid.js |
| 品牌 | 免费 | fab | |
fa-brands-400.* | brands.js |
| 细体 | 仅专业版 | fal | |
fa-light-300.* | light.js |
| 常规 | 仅专业版 | far | |
fa-regular-400.* | regular.js |
| 双色 | 仅专业版 | fad | |
900 |
1.图标尺寸与颜色
fa图标会自动继承css大小和颜色:
<span style="font-size: 48px; color: Dodgerblue;">
<i class="fas fa-camera">i>
span>
web字体+css 和 svg+js框架都包含一些基本控件,可以调整图标的大小.下面是相对父容器的尺寸:
<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> Skatingdiv>
<div><i class="fas fa-skiing fa-fw" style="background:SkyBlue">i> Skiingdiv>
<div><i class="fas fa-skiing-nordic fa-fw" style="background:DodgerBlue">i> Nordic Skiingdiv>
<div><i class="fas fa-snowboarding fa-fw" style="background:SkyBlue">i> Snowboardingdiv>
<div><i class="fas fa-snowplow fa-fw" style="background:DodgerBlue">i> Snowplowdiv>
列表中的图标: 在固定宽度的垂直对齐基础上添加了一些实用样式.使用 fa-ul 和 fa-li 替换无序列表的默认项目符号.
<ul class="fa-ul">
<li><span class="fa-li"><i class="fas fa-check-square">i>span>List icons canli>
<li><span class="fa-li"><i class="fas fa-check-square">i>span>be used toli>
<li><span class="fa-li"><i class="fas fa-spinner fa-pulse">i>span>replace bulletsli>
<li><span class="fa-li"><i class="far fa-square">i>span>in listsli>
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>
使图标在旋转或搏动时保持完美居中时,web字体+css存在普遍问题.可以这样解决:
- 切换框架-切换到带有JavaScript版本的SVG
- 设置动画图标的显示-使用 display: block;
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>