Font Awesome 5 页面引入的几种方式和应用
在做网页开发中,前端页面显示时经常会用到字体库图标,如 iconfont, fontawesome, glyphicons, lonicons等
其中最著名的就是fontawesome了，现在版本已经更新到了5.x
一.fontawesome本质原理
fontawesome本质上是把图标做成了字体文件,一个图标代表一个特殊符号,需要某个图标时也可引用这个字体文件(css文件).如:
.fa-500px:before {
content: "\f26e";
}
.fa-accusoft:before {
content: "\f369";
}
html页面:
<!-- 引入字体图标 -->
<div class="icon"></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>
