vue项目中引入阿里 iconfont 图标 动态渲染导航菜单图标

vue + element 后台项目，项目中都是用的 element-ui 的图标

但是导航菜单是通过后台数据渲染的，所以在阿里图标库找了图标给后台，再渲染

步骤一：

在图标库找到想要的图标，加入购物车

步骤二：

选择添加至项目

项目自己新建一个就行，之前还以为要把需要使用图标的项目导进来 [‘汗颜’]

步骤三：

在vue项目的assets文件夹下新建一个iconfont文件夹，将下载下来的上图5个文件复制到iconfont下

步骤四：

在main.js中引入 iconfont.css

步骤五：

单独使用

<i class='iconfont icon-shouye'></i>

动态渲染导航菜单使用

<template v-for="item in menusData"><el-menu-itemv-if="!item.sysMenuInfo":key="item.id":index="item.path">// 重点**<i class='iconfont' :class="item.icon"></i>**<span slot="title">{{item.menuName}}</span></el-menu-item></template>

另外，可以调整图标大小

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