为什么使用iconfont？

iconfont官网地址：iconfont官网

1. 矢量化：Iconfont图标是矢量图标，可以无限放大而不失真，适应不同分辨率的设备，保证图标显示清晰。
2. 减少HTTP请求：将多个图标合并到一个字体文件中，减少了页面对于图标的HTTP请求次数，提高了页面加载速度。
3. 方便更改颜色和大小：通过CSS样式可以方便地更改图标的颜色、大小等样式，而且一次更改，全站生效。
4. 兼容性好：Iconfont图标的兼容性非常好，支持的浏览器和设备非常广泛，包括移动端和桌面端。
5. 易于维护：将图标统一管理在一个字体文件中，方便维护更新，而且可以通过字体文件的方式来管理图标版本，便于版本控制。
6. 节省带宽：由于字体文件相对于图片来说体积小，可以节省服务器带宽，加快页面加载速度。

所以，使用Iconfont可以提高网页性能，简化图标管理，提升用户体验，是Web开发中常见的优秀实践之一。

方法一：下载使用图标

1.1 登录iconfont官网官网

1.2 搜索想要的图标

找到想要的图标并点击

1.3 点击下载

选择格式 将自己下载好的图片放到自己图片文件夹下面，并去html文件调用

1.4调用结果：

方法二：unicode 引用

Unicode引用是在HTML中使用特殊字符的一种方式，它有以下优点和缺点：

优点：

1. 跨平台兼容性：Unicode引用是一种标准的字符编码方案，可以在不同平台和设备上正确显示特殊字符，保证了跨平台的兼容性。
2. 字符扩展能力：Unicode引用可以表示广泛的特殊字符，包括各种语言的字符、符号、表情等，使得页面可以展示更多样化的内容。
3. 简洁性：Unicode引用是一种简洁的表示方式，使用特殊字符的编码值来引用字符，相对于其他方式（如实体引用）可以减少代码量，提高代码可读性。
4. 可维护性：通过使用Unicode引用，可以直接在HTML中嵌入特殊字符，而不需要额外的图片或字体文件，简化了项目的维护和管理。

缺点：

1. 记忆难度：Unicode引用使用字符的编码值来表示，对于常见的特殊字符还好，但对于较为罕见的字符，需要记忆或查询其具体的编码值，可能增加开发者的学习成本。
2. 可读性：Unicode引用的字符编码值并不直观，对于非专业开发者或初学者来说，可能不容易理解代码的含义，降低了代码的可读性。
3. 维护难度：如果在页面中大量使用Unicode引用来表示特殊字符，当需要更改特殊字符时，需要修改相应的编码值，可能增加维护的难度。
4. 浏览器支持：尽管大多数现代浏览器对Unicode引用有良好的支持，但仍有一些旧版本的浏览器可能不完全支持或存在兼容性问题，需要进行兼容性处理。

所以，Unicode引用是一种方便跨平台展示特殊字符的方式，具有简洁性和兼容性等优点，但也存在记忆难度和可读性等缺点，开发者在选择使用时需要权衡利弊。

2.1找到想要的图标并加入购物车：

2.2点击右上角购物车图标并加入项目：

2.3找到项目并生成代码：

2.4 复制代码之到相应的CSS文件或html文件中

2.5 使用iconfont的样式

以下是iconfont样式

.iconfont{
  font-family:"iconfont" !important;
  font-size:16px;font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;}

或者到官网去复制iconfont样式，以下是寻找以及复制步骤

在使用帮助中找到iconfont样式

复制到相应css文件中或style标签中

2.6 复制图标编码放到标签中

复制编码

2.7 使用运行

使用live server运行，提高效率，实时预览，live server可以在搜索中下载使用。

结果：

方法三：font-clas 引用

优点：

1. 轻量级：使用font-class可以有效减小页面加载的字体文件大小，因为它只需要引入一份字体文件，而不是多个图片文件或其他字体文件。
2. 兼容性好：由于font-class本质上是使用字体文件来显示图标，因此在各种浏览器和设备上的兼容性较好，包括移动端和桌面端。
3. 样式可定制性强：使用font-class可以像处理文字一样来处理图标，可以通过CSS来控制图标的颜色、大小、阴影等样式，定制性较强。
4. 易于维护：使用font-class可以将所有图标统一管理，方便维护和更新，而且可以通过类名来使用，易于识别和操作。

缺点：

1. 局限性：使用font-class只能展示单色图标，无法支持多彩图标或渐变色图标，对于一些特殊需求可能无法满足。
2. 图标数量受限：每个字体文件的图标数量是有限的，当需要大量图标时，可能会导致多个字体文件的引入，增加了管理的复杂性。
3. 定制性受限：虽然使用CSS可以对图标进行一定程度的样式定制，但相比SVG等其他方式，其定制性相对受限。
4. 字体文件加载：虽然字体文件通常较小，但仍需要额外加载字体文件，可能会增加页面的加载时间。

所以，font-class作为一种展示图标的方式具有轻量、兼容性好和样式可定制性强等优点，但也存在着局限性、图标数量受限和定制性受限等缺点。在选择使用时，需要根据具体的项目需求和情况进行权衡和取舍。

3.1 复制到html文件的link标签中

注意1：复制的代码是需要在前面加上http:才能使用！！！

3.2 复制图标编码到iconfont类中

3.3 使用运行

注意2：如果用此方法去修改图标大小使用font—size属性时需要在后面加入! important强制改变！！！

大小未改变

使用! important强制改变

大小发生改变

以上便是关于iconfont矢量图标库的几种使用方法，希望能够帮助到大家！