字体图片 fa

简介

字体图片 fa 是一款基于字体的图标集，包含超过 7,500 个图标，可以应用于网页、移动应用等各种领域，使用简单灵活。其规范的命名方式和易于扩展的特性，使其在开发中被广泛地应用。

特性

1. 占用空间小：采用字体技术，每个图标均可归为一个字符，占用空间非常小，对于网站性能有很好的提升;
2. 可扩展性强：可以通过自定义 CSS 更改图标大小、颜色等属性，也可以添加新的图标，轻松扩展应用;
3. 多种应用场景：适用于各种终端应用场景，包括网站、移动应用以及打印等领域;

用法

CDN 引入

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-VLEzg1f7sb46MtrGCodh+E9k0/IrJbyYS2QGHBjKcR0ZJp0OSBGU6sgKu6k+hU6MX+jvpDsCSbJjoSO8pDl1Kg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

基本用法

<i class="fas fa-user"></i>

自定义样式

<i class="fas fa-user" style="font-size: 24px; color: #ff0000"></i>

图标分类

fa 图标共分为 7 个分类：

• Solid：填充式图标
• Regular：线框式图标
• Brands：品牌及相关图标
• Light：浅色填充式图标
• Thin：细线填充式图标
• Duotone：双色调图标
• All：所有类型的图标

示例

下面展示一些常用的 fa 图标：

实心图标

<i class="fas fa-search"></i>
<i class="fas fa-envelope"></i>
<i class="fas fa-user"></i>
<i class="fas fa-home"></i>
<i class="fas fa-phone"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-star"></i>

边框图标

<i class="far fa-calendar-alt"></i>
<i class="far fa-comment"></i>
<i class="far fa-eye"></i>
<i class="far fa-file-alt"></i>
<i class="far fa-hand-point-left"></i>
<i class="far fa-thumbs-up"></i>
<i class="far fa-clock"></i>

品牌图标

<i class="fab fa-facebook"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-youtube"></i>
<i class="fab fa-github"></i>
<i class="fab fa-linkedin"></i>
<i class="fab fa-qq"></i>
<i class="fab fa-wechat"></i>

参考链接

• Font Awesome官网
• Font Awesome图标分类