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;}