css引入矢量图标_蘑菇博客前端页面如何引入矢量图标

前言

大家好，我是陌溪

蘑菇博客前端页面最开始使用的图标都是一张张的 png 图片，在不同的分辨率上会出现失真的情况，后面在其它小伙伴的介绍下，我了解到了矢量图标。

矢量图是根据几何特性来绘制图形，矢量可以是一个点或一条线，矢量图只能靠软件生成，文件占用内在空间较小，因为这种类型的图像文件包含独立的分离图像，可以自由无限制的重新组合。它的特点是放大后图像不会失真，和分辨率无关，适用于图形设计、文字设计和一些标志设计、版式设计等。

因此打算将原来页面中的小图标都使用矢量图标来替换，经过调查后，发现目前比较主流的矢量图标库有下面两个

阿里巴巴矢量图标库：

https://www.iconfont.cn/

Fontawesome：

http://www.fontawesome.com.cn/

本文将以阿里巴巴矢量图标为例，开始讲解矢量图标在蘑菇博客中的使用。

采购图标

首先进入阿里巴巴矢量图标库的官网 ( https://www.iconfont.cn/