font awesome 使用

2019-12-16T13:06:29.png

font awesome 是流行的 icon 图标库。最新版为 version 5

font awesome 分为付费版和免费版，付费版有 7020 个 icon，免费版有 1535 个 icon。
免费：brands.js solid.js
付费：regular.js light.js

官网：https://fontawesome.com/
GitHub 项目地址：https://github.com/FortAwesome/Font-Awesome
release 地址：https://github.com/FortAwesome/Font-Awesome/releases
w3 教程：https://www.w3schools.com/icons/fontawesome5_intro.asp

下载

在 GitHub 发布页下载最新版：

wget https://github.com/FortAwesome/Font-Awesome/releases/download/5.12.0/fontawesome-free-5.12.0-web.zip
unzip fontawesome-free-5.12.0-web.zip

引用

在 html 的 <head> 标签内引用免费的 js 文件：

  <script defer src="/your-path-to-fontawesome/js/brands.js"></script>
  <script defer src="/your-path-to-fontawesome/js/solid.js"></script>
  <script defer src="/your-path-to-fontawesome/js/fontawesome.js"></script>

或者加载 all.min.js 文件，内含所有基本的功能：

<script defer src="/your-path-to-fontawesome/js/all.min.js"></script>

使用

icon 图标常使用 <i> 或 <span> 标签来定义。

2019-12-16T13:54:18.png

修改图标大小

2019-12-16T14:01:36.png

<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>

也可以通过父级相对大小进一步调整大小属性：

2019-12-16T14:03:13.png

<div style="font-size: 0.5rem;">
  <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>

图标宽度匹配

使用 class 类 fa-fw 使图标大小相匹配。

2019-12-16T14:06:11.png

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

修改图标颜色

2019-12-16T13:56:24.png

<span style="font-size: 3em; color: Tomato;">
  <i class="fas fa-camera"></i>
</span>

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

<span style="font-size: 3rem;">
  <span style="color: Mediumslateblue;">
  <i class="fas fa-camera"></i>
  </span>
</span>

动态图标

通过增加 class 属性 fa-spin 可使图标旋转起来，使用 fa-pulse 属性可使图标分 8 steps 进行旋转。
2019-12-16T14:10:04.png

<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>

其他使用方法及功能参考教程的右边边栏项：https://fontawesome.com/how-to-use/on-the-web/styling/animating-icons