这篇文章上次修改于 1080 天前,可能其部分内容已经发生变化,如有疑问可询问作者。

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

图标检索

使用一下网站进行图标搜索:

cheatsheet 官网:https://fontawesome.com/cheatsheet
搜索图标:https://fontawesome.com/icons/search