Elementui icon图标不显示/不全

文章结构

       现在使用自带的图片预览插件---实现点击按钮预览图片列表el-image-viewer；访问链接：https://element.eleme.cn/#/zh-CN/component/image  

       关于Element UI----是一套采用 Vue 2.0 作为基础框架实现的组件库，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助网站快速成型；在开发中，常常会使用其中的各种组件；

• icon库
• 效果实现
• 问题
• 解决方案

icon库

vue搭建的项目，使用的Element ui的icon图标

核心点：Element ui 不同版本对应的icon不同

效果实现

如下图：

     点击缩略图，实现图片预览---功能有放大、缩小、全屏、旋转等功能

 

问题

图一为：开发时的样子，后三个icon不展示

图二为：升级Element ui版本后，前两个icon不展示； 查看style,更改before的内容（如图三），第一个图标展示；

 

如下图：

 

图一

 

 

 

 

图二

 

图三

 

解决方案

• 在package.json文件中，找到element-ui,查看版本，升级版本；
• 升级方法---将element-ui修改为指定版本，（比如“element-ui”:'^2.15.3'）npm install就可以了。
• 在对应的css文件夹里，找到element-icons.ttf与element-icons.woff,将其与 使用的element-ui的版本保持一致
• 下载路径   

   <a href="https://unpkg.com/browse/element-ui@2.5.4/"></a>
  

  https://unpkg.com/browse/element-ui@2.5.4/      https://unpkg.com/browse/element-ui@2.5.4/lib/theme-chalk/fonts/                                                                  　　version中选择对应的版本下载就🆗啦

• 查看是否有icon自定义，避免覆盖
• 动态获取的话，记得及时更新，重点是  版本一致
  

 

       ⭐心里藏着小星星~~~

       ⭐生活才能亮晶晶~~~

        记得享受生命的每一天哦！！！