vue项目引入字体图标iconfont

直接将icon下载成图片使用或者通过import方式移入url使用，看此篇

本文介绍两种使用方案：1.使用Font class引入字体图标（推荐） 2.使用Symbol 引用
如果是分批次的下载了好几次字体图标，那么可以将解压的代码css等文件放在不同的文件夹内，分别引入使用即可

准备工作：登入阿里字体图标库

选择图标加入购物车
下载代码：

一、解压后，将除了html的文件都复制一份到自己项目assets下：

二、点击打开之前解压的html文件

三、main.sj下引入字体图标样式：

四、两种使用方案

方案1：通过Font class引入字体图标，类名修改字体图标的大小和颜色（推荐此方法：可改变图标大小和颜色）
步骤：1.1先使用<span class="iconfont icon-类名"></span> 引入；
1.2.再通过对应class类名修改css样式；

方案2：使用Symbol 引用（此方法，svg对于原图标有颜色的，会自动带入颜色，同时修改不了其颜色；对于无颜色的图标，可修改颜色；）

2.1.先在app.vue下引入通用 CSS 代码（引入一次就行）；
通用 CSS 代码：

<style>
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

2.2.在对应页面的下使用svg引入图标；
svg代码：

2.3.也可以给svg添加类名修改图标样式：（此方法，svg对于原图标有颜色的，会自动带入颜色，同时修改不了其颜色；对于无颜色的图标，可修改颜色；）