Font Awesome Web 应用图标学习笔记

介绍

Font Awesome 是一组网页图标字体和 CSS 工具包。它是免费的，并且开源，由 Dave Gandy 创建。

Font Awesome 的字体包含了数百个图标，其中包括 Web 应用所需的常见图标，如文件、编辑、播放、垃圾桶等等。同时，Font Awesome 还提供了多套样式、尺寸和颜色的图标，以便于开发者在具体应用场景中进行选择。

使用方法

安装

使用 Font Awesome 首先需要下载或安装 Font Awesome 到项目中。可以通过以下两种方式进行：

• 下载 ZIP 文件，解压后将 CSS 和 fonts 两个文件夹复制到你的项目中。

• 通过 NPM 包管理工具安装

  shellCopy Code
  npm install @fortawesome/fontawesome-free
  

引入

引入 Font Awesome 主要有两种方式：

• 在 HTML 中使用 CDN 引入

  htmlCopy Code
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-LGJQW9iX12tLVnRGxJG+gA0pkOrIcIb7en24RfhFslu7HkUcbOpZlO6rL9Ynyqa0Hp0Bv48MSZWafdBjKg4i5w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  

• 在项目中引入

  htmlCopy Code
  <link rel="stylesheet" href="./path/to/fontawesome/css/all.min.css">
  

使用

Font Awesome 的图标可以通过在 HTML 中添加 CSS class 来使用，在 class 名称的前缀统一为 fa，后面跟上具体图标名称即可。同时也可以应用 Font Awesome 提供的 CSS 类来调整图标的大小、颜色以及效果等。

htmlCopy Code
<!-- 在 HTML 中使用，其中 fa-edit 是编辑图标的名称 -->
<i class="fas fa-edit"></i>

cssCopy Code
/* 应用 Font Awesome 提供的类，增加图标的效果 */
.fa-edit:hover {
  color: red;
  cursor: pointer;
}

实例演示

以下是一些常见的 Font Awesome 图标以及它们的 HTML 代码：

文件图标

htmlCopy Code
<i class="far fa-file"></i> <!-- 空文件图标 -->
<i class="far fa-file-word"></i> <!-- Word 文件图标 -->
<i class="far fa-file-excel"></i> <!-- Excel 文件图标 -->
<i class="far fa-file-pdf"></i> <!-- PDF 文件图标 -->
<i class="far fa-file-image"></i> <!-- 图像文件图标 -->

编辑图标

htmlCopy Code
<i class="fas fa-pencil-alt"></i> <!-- 铅笔编辑图标 -->
<i class="fas fa-edit"></i> <!-- 编辑图标 -->
<i class="fas fa-highlighter"></i> <!-- 高亮标记图标 -->

播放图标

htmlCopy Code
<i class="far fa-play-circle"></i> <!-- 空心播放图标 -->
<i class="fas fa-play-circle"></i> <!-- 实心播放图标 -->
<i class="fas fa-pause-circle"></i> <!-- 暂停图标 -->

垃圾桶图标

htmlCopy Code
<i class="far fa-trash-alt"></i> <!-- 无效垃圾桶图标 -->
<i class="fas fa-trash-alt"></i> <!-- 有效垃圾桶图标 -->
<i class="fas fa-recycle"></i> <!-- 回收站全选图标 -->