蘑菇博客前端页面如何引入矢量图标
前言
大家好，我是陌溪
蘑菇博客前端页面最开始使用的图标都是一张张的 png 图片，在不同的分辨率上会出现失真的情况，后面在其它小伙伴的介绍下，我了解到了矢量图标。
矢量图是根据几何特性来绘制图形，矢量可以是一个点或一条线，矢量图只能靠软件生成，文件占用内在空间较小，因为这种类型的图像文件包含独立的分离图像，可以自由无限制的重新组合。它的特点是放大后图像不会失真，和分辨率无关，适用于图形设计、文字设计和一些标志设计、版式设计等。
因此打算将原来页面中的小图标都使用矢量图标来替换，经过调查后，发现目前比较主流的矢量图标库有下面两个
阿里巴巴矢量图标库： https://www.iconfont.cn/ Fontawesome： http://www.fontawesome.com.cn/
本文将以阿里巴巴矢量图标为例，开始讲解矢量图标在蘑菇博客中的使用。
采购图标
首先进入阿里巴巴矢量图标库的官网 ( https://www.iconfont.cn/ )。然后输入我们需要采购的图标，这里以 Github 为例
采购矢量图标
然后在选中对应的图标，加入购物车，挑选完成后，我们点击购物车，然后点击添加至项目
添加到项目中
这个时候，下面会出现有一个弹框，如果没有对应的项目的话，我们需要自己创建一个
img
然后点击按钮，将刚刚采购的矢量图标下载到本地
下载至本地
引入矢量图标
下载完成后，我们解压文件夹，将得到以下的内容
解压后的文件
我们打开 demo_index.html 文件，将看到我们刚刚下载的几个图标
使用文档
同时能看到每个图标对应的Unicode码，我们就安装第一种方式引入到Vue项目中
首先将刚刚文件夹内，除了 demo_index.html 的文件都复制到 vue 项目的 assest 中，创建一个文件夹叫iconfont。
引入到vue项目中
需要在 main.js 中引入样式文件
import "@/assets/iconfont/iconfont.css";
就可以使用了，注意 <span> 标签中的内容，就是个刚刚 demo_index.html 中的 Unicode 编码，我们引入对应的编码即可得到对应的图标。
<span class="iconfont"></span>
<span class="iconfont"></span>
同时还可以设置矢量图标的颜色，下面看看最终的效果图
引入后的效果图