vue项目使用iconfont教程

1.创建项目，选中合适图标添加购物车

2.把图标添加到项目中

3.编辑图标颜色


4.仅保存修改的内容

5.下载至本地

6.把下载文件中文件复制到项目中


7.新建一个index.vue

8.编写代码
新建index.vue代码

<template>
  <i :class="'v-icon-' + name"></i>
</template>
<script>
export default {
  name: 'VIcon',
  props:{
    name: String
  }
}
</script>
<style>
@import url('./iconfont.css');
</style>

9.修改iconfont.css代码
修改前

修改后

[class*=" v-icon-"],
[class^="v-icon-"]

10.main.js引用

11.图标使用

<v-icon name="shuangjiantouyou"></v-icon>
<i class="v-icon-ningmeng"></i>