关于ElementUI不显示部分图标的问题

最新推荐文章于 2025-03-27 16:17:06 发布
最新推荐文章于 2025-03-27 16:17:06 发布
阅读量1.2k 收藏
点赞数 1
分类专栏： vue elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hi_kong/article/details/115118349
版权

vue.js

        今天遇到了ElementUI中有部分图标不显示的问题。比如el-icon-delete显示但是el-icon-delete-solid就不显示。

        解决办法是把ElementUI的版本改成最新版。比如现在最新版是2.15.1。

        那么就需要在项目的package.json文件中找到element-ui，改成相应的版本：

        最后，执行npm install。重新安装。之后再运行就没问题了。

vue3 Element Plus中icon图标不显示
m0_68683769的博客
04-12 4881
vue3中图标全局引入,vue3中图标全局引入,vue3中图标无效,element-plus 全局注册图标,main.js element-plus 全局注册图标,element-plus 全局注册图标,全局注册图标，图标全局注册,图标全局引入，图标按需引入，vue3 element-plus/icons图标的逐步引入和全局引入
本地引入element不显示图标问题.doc
03-20
### 本地引入Element UI图标不显示问题解析及解决方法 #### 一、问题背景与概述 在使用Element UI框架进行前端开发时，可能会遇到从特定链接（如：`...
electron-builder vue 打包后element-ui字体图标不显示问题
weixin_64103049的博客
01-26 794
electron-builder vue 打包后element-ui字体图标不显示问题
解决electron-builder vue 打包后element-ui字体图标不显示问题
最新发布
小韩要快乐！
03-27 371
【代码】解决electron-builder vue 打包后element-ui字体图标不显示问题。
android漂亮的登录ui_Vue项目中使用element-ui 并引入第三方图标库
weixin_39822728的博客
10-28 592
1、安装npm install element-ui --save-dev2、在main.js文件中引入import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);3、上面两步完成后，就可以在项目任意的组件中使用element-ui的组件了，具体使用方法，详...
Element-ui关于el-icon无法正常显示的问题（已解决）
Astronaut224的博客
10-27 8858
在使用element-ui组件库的时候，使用自带的图标不显示，查了好多篇博客，都说是element-ui的版本老了，在package.json中修改版本重新安装就行，但是我的情况不是这样。
elementui图标组件不生效的解决方案
weixin_45874118的博客
06-07 3612
vue项目在用elementui时，想引用里面的图标库，如下图
vue+elementUi 实现密码显示/隐藏+小图标变化功能
10-15
标题和描述中提到的知识点是关于如何使用Vue框架结合Element UI组件库来实现密码输入框的显示/隐藏功能以及配合的小图标变化功能。具体实现涉及到Vue的响应式数据绑定、事件处理和条件渲染等核心特性，同时利用...
详解Vue+elementUI build打包部署后字体图标丢失问题
10-15
在开发环境下，我们可能并没有意识到路径或配置问题，但是在使用`npm run build`命令进行项目打包后部署上线时，就可能出现字体图标不显示的问题。具体表现是在控制台中显示404错误，找不到`element-icons.woff`和`...
Vue中使用ElementUI使用第三方图标库iconfont的示例
10-17
在上述步骤中特别要注意，如果直接使用ElementUI的“el-icon”作为图标前缀，可能会与ElementUI自身的图标集发生样式冲突，导致图标显示异常。因此，建议使用自定义的前缀，以保证项目中图标的样式不被影响。 通过...
vue+elementUI实现时间线的自定义显示.zip
04-22
在这个"vue+elementUI实现时间线的自定义显示.zip"项目中，我们将看到如何利用Element UI的组件和Vue.js的特性来创建一个定制化的时间线。 首先，让我们关注"index.vue"这个文件，这是Vue.js应用的主要入口文件。在...
vue打包后element-icon不显示问题解决
qq_42535651的博客
10-21 3024
在vue打包完，发现很多问题，来整理下： 第一：使用element框架的icon时候，开发环境下是没有问题的，打包完以后出现小方块，页面不显示， 解决办法：找到utils.js文件，加 publicPath: ‘…/…/’ function generateLoaders (loader, loaderOptions) { const loaders = options.usePostCS...
vue 学习笔记 【ElementPlus】el-menu 折叠后图标不见了
xjcwzp的专栏
07-25 2757
解决办法是把icon 从#title 中提取出来。运行过程中，菜单折叠后，图标不见了。
关于elementplus的icon图标不显示的问题
热门推荐
心藏_的博客
11-19 1万+
这里我安装的版本是“element-plus": "^1.2.0-beta.3 解决方案 本来我是按照别人的教程来的，但是图标死活不显示，看了网上的解决办法都是降版本，懒得搞了，去官网上研究了一下，感觉好麻烦，不过最终还是解决了这个小问题。 这里是前缀图标，用的:prefix-icon="Search",后缀的话就是:suffix-icon="Calendar" 这四个少一个都不行，坑死了。 放其他的图标去官网上面找就好了 图标icons链接 替换的话就是把上面的Search改成对应的图标英文就好了，
在项目使用Element UI的图标时，进入页面发现图标不能全部显示
m0_52043522的博客
04-02 909
问题描述： 在vue2项目中使用Element UI的icon图标时，发现页面中使用的图标并不能完全显示。 原因分析： 在package.json文件中，查看Element UI的版本，发现版本号有点低； 解决方案： 需要卸载之前的Element UI，再安装指定版本。 卸载命令：npm uninstall element-ui 安装指定版本命令：npm install element-ui@2.15.6 --save （注意：这里的指定版本号要紧跟着element-ui，它们中间没有空格） 安装完成，
使用element-ui时el-icon图标不显示
Matcha_ice_cream的博客
03-06 7412
在使用el-icon图标时，图标不显示： 原因分析：element-ui 的版本太低 解决方案：升级 element-ui 的版本 直接在package.json中更改 element-ui 更高级别的版本，版本可以去 element-ui 官网中查看： （1）查看 element-ui 版本： （2）更改element-ui 版本： 更改完成后，使用npm install 安装更新后的element-ui 插件，使用npm run dev运行项目 正常显示图标： ...
element-ui 图标不显示
qq_28131031的博客
07-30 321
vue旧项目升级 最后导致icon不显示，原因是url-loader版本太高，或者和file-loader版本不匹配
Element Plus Icon图标自动引入时图标不显示
m0_56745001的博客
03-07 713
Element Plus Icon图标自动引入时图标不显示
elementPlus使用icon图标不显示解决方法
分享Java，vue学学习笔记
04-09 1万+
近期在学习Vue时用elementUI时发现icon在页面上显示不出来，根据官方文档上的用法都显示不出来，听说在文档更新后好像不可以直接使用，需要引用。 正常按照文档标签使用（icon图标未显示） <el-input :prefix-icon="Key" v-model="**"style="width: 50%" placeholder="请输入验证码"> <el-icon :size="20"> <Key /> </el-icon>
elementui侧边导航栏菜单折叠显示图标
01-15
### 关于ElementUI侧边导航栏菜单折叠时显示图标 在使用Element UI的`<el-menu>`组件构建网页应用时，当遇到需要处理侧边导航栏菜单折叠并在此状态下显示图标的情况，可以通过设置特定属性来实现这一需求。对于希望仅在收起模式下展示图标的场景，可利用`collapse`属性控制展开/收缩状态，并通过判断此属性的状态，在模板内动态切换文字与图标的内容呈现。 下面是一个简单的实例代码片段用于说明如何操作： ```html <!-- HTML部分 --> <template> <div style="height: 100%;"> <!-- 使用 collapse 属性控制菜单的展开和折叠 --> <el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" :collapse="isCollapse"> <el-submenu index="1"> <template slot="title"> <i class="el-icon-location"></i> <!-- 这里放置icon标签 --> <span v-if="!isCollapse">导航一</span> <!-- 当 isCollapse 为 false 才会渲染这段文本 --> </template> ... </el-submenu> ... </el-menu> </div> </template> <script> export default { data() { return { isCollapse: true, // 控制菜单是否处于折叠状态，默认true表示已折叠 }; }, }; </script> <style scoped> .el-menu-vertical-demo:not(.el-menu--collapse) { width: 200px; min-height: 400px; } </style> ``` 上述代码展示了基本思路：借助`:collapse`绑定变量管理菜单的整体宽度变化；而针对每项子菜单，则是在其标题区域分别加入固定存在的图标以及受条件约束的文字描述——即只有当菜单未被折叠(`v-if="!isCollapse"`成立)，才会显示出完整的名称[^1]。 为了进一步优化用户体验，还可以考虑增加一些交互逻辑，比如点击按钮触发`isCollapse`值的变化从而达到手动开关的效果，或是配合媒体查询自动适应不同屏幕尺寸下的布局调整等高级特性。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值