使用Element UI组件时,icon图标不显示

问题描述:

我在使用Element UI组件的日期选择器时,发现图标不显示(左边是原图,右边的问题图)。

经过检查我发现,我的JS,CSS文件都没有问题,只是缺少了element-icons.tff和element-icons.woff这两个文件。

如果你也是icon图标不显示,你可以用这个方法重新替换这两个文件,或者去将CSS和JS的版本号更新到最新。

解决方法:

  1. 直接去官网,看他的CDN中给出的CSS链接。
  1. 复制后面"https://unpkg.com/element-ui/lib/theme-chalk/"这个链接。
  1. 右上角是版本号,左下角是有关图标的文件夹。根据你的版本号,进入fonts这个文件,你会发现有两个文件。
  1. 点击第一个element-icons.tff文件,再点击 View Raw按钮下载这个文件。

同理,也下载element-icons.woff文件。

  1. 最后,将这两个文件放在css文件夹下的fonts文件下。
相关推荐
AAA阿giao12 分钟前
从零拆解一个 React + TypeScript 的 TodoList:模块化、数据流与工程实践
前端·react.js·ui·typescript·前端框架
晚霞的不甘40 分钟前
Flutter for OpenHarmony 构建简洁高效的待办事项应用 实战解析
flutter·ui·前端框架·交互·鸿蒙
百思可瑞教育1 小时前
构建自己的Vue UI组件库:从设计到发布
前端·javascript·vue.js·ui·百思可瑞教育·北京百思教育
XPii12 小时前
Photoshop应用——将图片变为水墨画效果
ui·photoshop
AC梦15 小时前
unity中如何将UI上的字高清显示
ui·unity
LeoZY_19 小时前
开源项目精选:Dear ImGui —— 轻量高效的 C++ 即时模式 GUI 框架
开发语言·c++·ui·开源·开源软件
Betelgeuse7619 小时前
【Flutter For OpenHarmony】TechHub技术资讯界面开发
flutter·ui·华为·交互·harmonyos
止观止1 天前
TypeScript 5.9 终极实战:构建一个类型安全的 UI 组件库 (含多态组件实现)
ui·typescript
Betelgeuse761 天前
【Flutter For OpenHarmony】 阶段复盘:从单页Demo到模块化App
flutter·ui·华为·交互·harmonyos
踏过山河,踏过海2 天前
【用ui文件做个简单工具的开发,为什么修改完ui后,程序重新编译运行后,GUI界面还是不变呢?】
qt·ui