自学教程Font Awesome 5
Font Awesome 5 的专业版有7864个图标，免费版有1608个图标。本教程将重点介绍免费版。
要使用免费的Font Awesome 5 图标，可以选择一下几种方式：
1、 使用KIT CODE 方式：
注册并获取免费KIT CODE：https://fontawesome.com/，获得KIT CODE代码后，只需包含一行HTML代码，即可开始在网页上使用Font Awesome:：
<script src="https://kit.fontawesome.com/yourcode.js"></script><!DOCTYPE html>
<html>
<head>
<title>Font Awesome 5 图标 - runoops.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://kit.fontawesome.com/78bb885bd3.js"></script>
</head>
<body>
<i class="fa fa-car"></i>
<i class="fa fa-car" style="font-size:48px;"></i>
<i class="fa fa-car" style="font-size:60px;color:red;"></i>
</body>
</html>2、使用cdn方式：
国内cdn：
Web Fonts + CSS:
<link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
或：
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.css" rel="stylesheet">SVG+JS:
<script src="https://cdn.staticfile.org/font-awesome/6.4.0/js/all.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/js/all.js"></script>国外cdn：
https://cdnjs.com/libraries/font-awesome
//Web Fonts + CSS:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"/>
//SVG+JS:
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/js/all.min.js"></script><i class="fa fa-car"></i>
<i class="fa fa-car" style="font-size:48px;"></i>
<i class="fa fa-car" style="font-size:60px;color:red;"></i>3、直接下载到本地：
官方下载地址：https://fontawesome.com/download/
本站下载：
4、npm 包安装方式：
npm install --save @fortawesome/fontawesome-free
或
yarn add @fortawesome/fontawesome-free
Font Awesome 5 中的新功能
Font Awesome 5 中的新功能是 fas 前缀，Font Awesome 4 使用 fa。
fas 中的 s 代表 solid，一些图标也有常规模式，使用前缀 far 指定:
<i class="fas fa-clock"></i>
<i class="far fa-clock"></i>Font Awesome 是为使用内联元素而设计的。我们通常更喜欢使用 <i> ，因为它更简洁。 但实际上使用 <span> 才能更加语义化。
还请注意，如果更改图标容器的字体大小或颜色，图标也会更改。同样的事情也适用于阴影，以及任何使用 CSS 继承的东西。
<i class="fas fa-clock" style="font-size:120px;color:#2196F3"></i>
<i class="far fa-clock" style="font-size:120px;color:#2196F3"></i>图标大小
使用 fa-xs, fa-sm, fa-lg, fa-2x, fa-3x, fa-4x, fa-5x, fa-6x, fa-7x, fa-8x, fa-9x, or fa-10x 类用于调整相对于其容器的图标大小。
<i class="fas fa-clock fa-xs"></i>
<i class="fas fa-clock fa-sm"></i>
<i class="fas fa-clock fa-lg"></i>
<i class="fas fa-clock fa-2x"></i>
<i class="fas fa-clock fa-5x"></i>
<i class="fas fa-clock fa-10x"></i>列表图标
使用 fa-ul 和 fa-li 类用于替换无序列表中的默认项目符号。
<ul class="fa-ul">
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>List Item</li>
<li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>List Item</li>
<li><span class="fa-li"><i class="fas fa-square"></i></span>List Item</li>
</ul>动态图标
使用 fa-spin 类来使任意图标旋转, 使用 fa-pulse 来使其进行8方位旋转。
<i class="fas fa-spinner fa-spin"></i>
<i class="fas fa-circle-notch fa-spin"></i>
<i class="fas fa-sync-alt fa-spin"></i>
<i class="fas fa-cog fa-spin"></i>
<i class="fas fa-cog fa-pulse"></i>
<i class="fas fa-spinner fa-pulse"></i>注释: IE8 和 IE9 不支持 CSS3 动画。
旋转与翻转的图标
使用 fa-rotate-* 和 fa-flip-* 类可以对图标进行任意旋转和翻转。
<i class="fas fa-horse"></i>
<i class="fas fa-horse fa-rotate-90"></i>
<i class="fas fa-horse fa-rotate-180"></i>
<i class="fas fa-horse fa-rotate-270"></i>
<i class="fas fa-horse fa-flip-horizontal"></i>
<i class="fas fa-horse fa-flip-vertical"></i>组合使用图标
如果想要将多个图标组合起来，使用 fa-stack 类作为父容器， fa-stack-1x 作为正常比例的图标， fa-stack-2x 作为大一些的图标。
还可以使用 fa-inverse 类可以用作替代图标颜色。您还可以向父级添加更大的图标类，以进一步控制尺寸。
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
fa-twitter (inverse) on fa-circle (solid)<br>
<span class="fa-stack fa-lg">
<i class="far fa-circle fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-circle (regular)<br>
<span class="fa-stack fa-lg">
<i class="fas fa-camera fa-stack-1x"></i>
<i class="fas fa-ban fa-stack-2x text-danger" style="color:red;"></i>
</span>
fa-ban on fa-camera固定宽度图标
就像字母和其他字符一样，图标可以有不同的宽度，如果需要垂直对齐列表或菜单中的图标，这可能是个问题。
使用 fa-fw 类可以将图标设置为一个固定宽度。
<p>Fixed Width:</p>
<div><i class="fas fa-arrows-alt-v fa-fw"></i> Icon 1</div>
<div><i class="fas fa-band-aid fa-fw"></i> Icon 2</div>
<div><i class="fab fa-bluetooth-b fa-fw"></i> Icon 3</div>
<p>Without Fixed Width:</p>
<div><i class="fas fa-arrows-alt-v"></i> Icon 1</div>
<div><i class="fas fa-band-aid"></i> Icon 2</div>
<div><i class="fab fa-bluetooth-b"></i> Icon 3</div>边框与对齐图标
使用 fa-border, fa-pull-right 或 fa-pull-left 类可以轻易构造出引用的特殊效果。
<i class="fas fa-quote-left fa-3x fa-pull-left fa-border"></i>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
分享笔记