有时候，我们做网站或者开发应用的时候，经常需要用到图标库。但是一想到如何设计图标就着实让人头痛，因为一个好的图标不仅可以提升用户体验，同时也能够为网站带来人气。
两款经典的图标库——Font Awesome 和 Iconfont，以其丰富的图标选择和易于使用的特性，深受开发者的青睐。今天介绍这两款图标网站的引用方法，帮助你快速将它们集成到你的项目中，让你的设计更加生动和专业。
一. Font Awesome 图标引用方法步骤:
1.访问Font Awesome官网下载zip包
https://fontawesome.com/download
2.我下载的是6.6.0版本，点击Free for web下载到本地
3.解压缩，将全部文件上传到根目录
4.复制下面代码：
<link rel="stylesheet" href="/css/all.min.css">
5.将链接添加到你的项目 在你的HTML文件的 head 部分粘贴复制的链接。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/all.min.css">
<title>Document</title>
</head>
<body>
<!-- 你的内容 -->
</body>
</html>
6.在HTML中引用图标，使用 i 标签或 span 标签配合特定的类名来显示图标。例如，使用一个“用户”图标可以这样写：
<i class="fas fa-user"></i>
这里，fas 表示“Font Awesome Solid”风格 粗体，而 fa-user 是图标的名称。
7.自定义样式（可选），你可以通过CSS自定义图标的大小、颜色等样式。
.custom-icon {
color: blue;
font-size: 24px;
}
然后在 HTML 中应用该类：
<i class="fas fa-user custom-icon"></i>
二. Iconfont 图标引用方法步骤:
1.访问 Iconfont 官网
https://www.iconfont.cn/
2.注册账户,并登陆
3.在首页或通过搜索框浏览图标，找到你需要的图标
4.选中图标后，点击“加入购物车”按钮，添加入库
5.点击网页右上角的购物车，添加进项目，选择你新建的项目，没有就默认no name
6.之后跳转到我的项目页面，点击Font class，点击查看链接，点击更新代码
7.之后会生成一个css链接，点击这个链接，将文件下载到本地
8.引入CSS文件 将解压后的CSS文件和字体文件放入你的项目目录中，然后在HTML文件的 head 部分引入 CSS 文件。例如：
<link rel="stylesheet" href="/css/iconfont.css">
9.在HTML中使用图标。通常的格式如下：
<i class="iconfont icon-icon-name"></i>
这里的 icon-icon-name 是你选择的图标的具体类名，可以在 CSS 文件中找到。
10.自定义样式（可选） 你可以通过 CSS 自定义图标的颜色、大小等样式。例如：
.custom-icon {
color: red;
font-size: 30px;
}
然后在 HTML 中应用该类：
<i class="iconfont icon-icon-name custom-icon"></i>
结束语录：
都是挺简单的。这两款图标个人偏向使用iconfont，加载速度不仅快，而且图标极其丰富易于使用，但是要注意版权问题，请勿滥用。Font Awesome加载速度会慢一点，有免费版限制，但是丰富的图标库一般也够用了。哈哈
Font Awesome图标库：
https://fontawesome.com/v4/icons/
https://fontawesome.com/v5/search?o=r&m=free
https://fontawesome.com/v6/search?o=r&m=free