第一步：
打开iconfont网页 http://www.iconfont.cn/collections
（这里就不说怎么创建个新项目了，自己可以百度查）
我的项目
把代码下载至本地：！！！注意前边我选的是Symbol
下载至本地
第二步：
在我的电脑里找到你的项目并打开，在src创建一个文件名为iconfont。
然后把你在iconfont内下载的文件解压至src的iconfont内：
image.png
这时项目里便出现iconfont，如下：
image.png
第三步：
在.vue文件中找到要放置图标的代码的位置：
复制代码模板：
<svg class="icon">
<use xlink:href="# "></use>
</svg>
空白处去iconfont里找到想要加入的图标代码，粘贴上去：
复制icon代码
能显示就是导入成功！
我自己的：
image.png
部分代码：
<div class="bottomBox">
<div class="box" v-if="mokeExam==true" @click="moke">
<svg class="icon" >
<use xlink:href="#icon-mmk_greenx"></use>
</svg>
<text class="fontExam">模拟考</text>
</div>
<div class="box" v-else-if="mokeExam==false" @click="moke">
<svg class="icon" >
<use xlink:href="#icon-mnk_grayx"></use>
</svg>
<text class="fontExam2">模拟考</text>
</div>
<div class="box" v-if="wrong==false" @click="mywrong()">
<svg class="icon">
<use xlink:href="#icon-ct_grayx"></use>
</svg>
<text class="fontExam2" >我的错题</text>
</div>
<div class="box" v-if="wrong==true" @click="mywrong()">
<svg class="icon">
<use xlink:href="#icon-ct_greenx"></use>
</svg>
<text class="fontExam" >我的错题</text>
</div>
<div class="box" v-if="recommend == false" @click="torecommend">
<svg class="icon" >
<use xlink:href="#icon-tj_gray"></use>
</svg>
<text class="fontExam2">推荐练习</text>
</div>
<div class="box" v-else-if="recommend == true" @click="torecommend">
<svg class="icon" >
<use xlink:href="#icon-tj_green"></use>
</svg>
<text class="fontExam">推荐练习</text>
</div>
</div>
我项目的icon样式是这样：
.icon {
height: 5em;
fill: currentColor;
}
如果以上方法依旧不能显示，试试把下载的icon的代码文件删掉，重新下载导入。
或者加一下下边这句代码：
点击复制代码
把复制的内容补充到下面的空白处：
<script>
src="http: ">
</script>
