【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的版本。
如图：

原来的版本是2.7.1，但是目前官网已经更新到2.8.2（你现在看这个帖子的时候可能又更新到其他版本了，按照官网的版本来）：

在package.json里面修改一下这个版本号，改成2.8.2，然后使用npm install重新更新一遍依赖包!!!
最后使用npm run dev运行项目，刷新一下页面，可以看到图标成功显示了：

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！