【Element-UI】解决el-icon图标显示不出来的问题

element-ui 图标icon的使用详见官网:
https://element.eleme.cn/#/en-US/component/icon

问题背景:
vue框架中使用element-ui,我的vue工程是使用脚手架创建的,是个vue webpack项目。

遇到的问题是:
在vue中加入elment-ui中的图标,但是页面上没有显示。页面部分代码为:

<el-menu-item index="/main">
     <i class="el-icon-menu">i>
     <span slot="title">首页span>
el-menu-item>
<el-menu-item index="/page1">
     <i class="el-icon-s-order">i>
     <span slot="title">标题1span>
el-menu-item>

可以看到,代码是没问题的,但是页面中就是没有显示图标,同时浏览器中的控制器也没有报错。

出错原因:
不显示的原因是项目中引入的element-ui的版本过低了,低版本的icon中没有代码中需要的图标。
比如我代码中使用的图标是,这个图标在低版本的element-ui中是没有的,所以显示不出来。需要在项目的package.json文件中更新一下element-ui的版本。
如图:
【Element-UI】解决el-icon图标显示不出来的问题_第1张图片
原来的版本是2.7.1,但是目前官网已经更新到2.8.2(你现在看这个帖子的时候可能又更新到其他版本了,按照官网的版本来):
在这里插入图片描述
在package.json里面修改一下这个版本号,改成2.8.2,然后使用npm install重新更新一遍依赖包!!!
最后使用npm run dev运行项目,刷新一下页面,可以看到图标成功显示了:
【Element-UI】解决el-icon图标显示不出来的问题_第2张图片

你可能感兴趣的:(Element-UI)