饿了么UI中的el-icon图标不生效问题分析并解决

问题描述

今天做项目的时候要做一个折叠左侧导航栏的功能。准备使用这个饿了么UI自带的折叠图标。图标长这样的：

但是引入了以后，发现图标不生效。在页面中没有显示出来。控制台审查一下元素发现，i标签倒是有，但是宽高为0（宽高为0就相当于没有），审查元素的图示如下：

又回头看了一下官网，官网上是有的啊，但是为啥页面上没有呢？难道是没有引入过来？看了看自己的代码是好的，然后就想到会不会是版本的问题，版本更新了以后，有一些图标被弃用了？
然后就看看package.json文件，发现我的elementui的版本号是2.4.11.如下图：

好像版本是有点旧了。然后就去官网找对应2.4.11版本号的图标，看有没有这个折叠图标：

回到以前的版本看看

解决方法

将elementui升级到具有el-icon-s-fold的折叠图标的版本即可。
执行命令npm i element-ui，就可以升级到最新版本的饿了么UI了，这样图标出出现了，哈哈问题解决。

思路总结

版本的升级可能会新增一些特性或者去除一些特性，所以在我们项目使用某个特性的时候，如果没出现我们想要的效果的时候。首先要去审查代码，找BUG，如果确定我们的代码写的没有问题的话，我们就要考虑是不是版本不匹配的问题。
即：
出现问题-->排查问题-->定位问题-->解决问题