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

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

vue项目中使用阿里iconfont图标(下载并在本地引用)
vue项目中使用阿里iconfont图标(下载并在本地引用) step1 step2 step3 在scr/asstets/css目录下新建icons文件夹,把图中所需要的四个文件放进去即可记得在m ...
vue项目中引入阿里云滑动验证
注册阿里云账号参照滑动验证demo 滑动验证在vue中使用步骤 1.在vue-cli安装的项目中,index.html页面引入js <html><head><meta ...
在 Quasar cli 搭建的 vue 项目中引用阿里字体图标 iconfont symbol方式
在 Quasar cli 搭建的 vue 项目中引用阿里字体图标 iconfont 1. symbol 方式 2. font class 方式(未实践) 1. symbol 方式首先说明一下,这 ...
vue ajax highcharts,在vue项目中引入highcharts图表的方法(详解)
npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个char ...
如何在Vue项目中引入ArcGIS JavaScript API 创建三维可视化地图（含vue项目创建教程）
新手上路之在Vue项目中引入ArcGIS API 视频教程 B站搜索 X北辰北,感谢up主无私的教学~ B站地址:https://www.bilibili.com/video/BV18E411K7B ...
VUE 项目中引入外部js文件（CND引入）
以VUE项目中引入echarts文件为例: 第一步在VUE项目中找到index.html文件引入 :<script src="https://cdnjs.cloudflare.com ...
如何在vue项目中引入html页面
在vue项目中引入html页面的两种方法第一种:/static/page.html 第二种:通过iframe嵌入第一种:/static/page.html 在static或public文件夹下,新 ...
vue项目中引入bootstrap的方法
vue项目中引入bootstrap?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 相关教程推荐:<bootstrap教程> 在 vue 项目 ...
【EasyExcel】在SpringBoot+VUE项目中引入EasyExcel实现对数据的导出（封装工具类）
在SpringBoot+VUE项目中引入EasyExcel实现导入导出一.引入EasyExcel 通过maven引入,坐标如下: <dependency><groupId>c ...

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

步骤一：

步骤二：

步骤三：

步骤四：

步骤五：

另外，可以调整图标大小

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

最新文章

热门文章

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

步骤一：

步骤二：

步骤三：

步骤四：

步骤五：

另外，可以调整图标大小

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

最新文章

热门文章

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

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