教程：两款经典图标库网站 fontawesome和iconfont的引用方法

发表于 分类于

有时候，我们做网站或者开发应用的时候，经常需要用到图标库。但是一想到如何设计图标就着实让人头痛，因为一个好的图标不仅可以提升用户体验，同时也能够为网站带来人气。

两款经典的图标库——Font Awesome 和 Iconfont，以其丰富的图标选择和易于使用的特性，深受开发者的青睐。今天介绍这两款图标网站的引用方法，帮助你快速将它们集成到你的项目中，让你的设计更加生动和专业。

一. Font Awesome 图标引用方法步骤:

1.访问Font Awesome官网下载zip包

1
2
3

https://fontawesome.com/download

2.我下载的是6.6.0版本，点击Free for web下载到本地

3.解压缩，将全部文件上传到根目录

4.复制下面代码：

1
2
3

<link rel="stylesheet" href="/css/all.min.css">

5.将链接添加到你的项目 在你的HTML文件的 head 部分粘贴复制的链接。例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!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 标签配合特定的类名来显示图标。例如，使用一个“用户”图标可以这样写：

1
2
3
4

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


这里，fas 表示“Font Awesome Solid”风格 粗体，而 fa-user 是图标的名称。

7.自定义样式（可选），你可以通过CSS自定义图标的大小、颜色等样式。

1
2
3
4
5
6
7

.custom-icon {
    color: blue;
    font-size: 24px;
}


然后在 HTML 中应用该类：

1
2
3
4

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


二. Iconfont 图标引用方法步骤:

1.访问 Iconfont 官网 

1
2
3

https://www.iconfont.cn/

2.注册账户,并登陆

3.在首页或通过搜索框浏览图标，找到你需要的图标

4.选中图标后，点击“加入购物车”按钮，添加入库

5.点击网页右上角的购物车，添加进项目，选择你新建的项目，没有就默认no name

6.之后跳转到我的项目页面，点击Font class，点击查看链接，点击更新代码

7.之后会生成一个css链接，点击这个链接，将文件下载到本地

8.引入CSS文件 将解压后的CSS文件和字体文件放入你的项目目录中，然后在HTML文件的 head 部分引入 CSS 文件。例如：

1
2
3

<link rel="stylesheet" href="/css/iconfont.css">

9.在HTML中使用图标。通常的格式如下：

1
2
3

<i class="iconfont icon-icon-name"></i>

这里的 icon-icon-name 是你选择的图标的具体类名，可以在 CSS 文件中找到。

10.自定义样式（可选） 你可以通过 CSS 自定义图标的颜色、大小等样式。例如：

1
2
3
4
5
6

.custom-icon {
    color: red;
    font-size: 30px;
}

然后在 HTML 中应用该类：

1
2
3

<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