iconfont图标导入idea的vue项目

第一步：
打开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>