Elementui icon图标不显示

最新推荐文章于 2024-05-27 16:41:53 发布
最新推荐文章于 2024-05-27 16:41:53 发布
阅读量4.8k 收藏 3
点赞数 1
分类专栏： ElementUI 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45139342/article/details/106994099
版权

文章目录

需求

需要实现显示icon图标

原理

不显示的原因是项目中引入的element-ui的版本过低了，低版本的icon中没有代码中需要的图标，
在低版本的element-ui中是没有的，所以显示不出来。需要在项目的package.json文件中更新一下element-ui的版本

  • 如图所示
    在这里插入图片描述

实现

  • 在package.json里面修改一下这个版本号，改成2.13.2【可以随Element_UI的官方版本改动】

在这里插入图片描述

  • 然后使用npm install重新更新一遍依赖包!!!
  • 最后使用npm run dev运行项目
  • 刷新一下页面，可以看到图标成功显示了

效果

在这里插入图片描述

icon图标链接

Element-UI icon图标链接：

相思寄清风
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
element-ui图标不显示问题(已解决）
sagiiiii的博客
03-03 8100
方法1：在package.json中修改element-UI版本号 方法二：(如果经方法一还是不能显示图标) main.js里面统一注册icon // 统一导入el-icon图标 import * as ElIconModules from '@element-plus/icons' // 统一注册el-icon图标 for(let iconName in ElIconModules){ app.component(iconName,ElIconModules[iconName]) } 方法三
icon图标无法显示
Bamboo_shui的博客
02-16 3394
开发java web项目时icon图标没办法显示 或 图标没有正常显示 或 图标有时出现有时不出现，如图 我的解决方法 1、可能还没有从网络上下载下来--连网等待下载（若是被拦截，可能下载下来也会被拦截） 2、可能被拦截了，没有进行过滤 在web.xml的过滤的忽略过滤值加上 *.ttf|*.woff|*.svg|*.eot
使用element-ui时el-icon图标不显示
Matcha_ice_cream的博客
03-06 6478
在使用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 版本@2.15.12部分icon不显示问题
最新发布
m0_50873766的博客
05-27 239
在main.js中，改变css的引入方式。
element 图标不显示
qi__lu的博客
05-23 668
今天突然试了一下，好像是反应了过来，项目是vue3，用的element UI图标也是UI3的图标，但是使用的时候，我是按照UI2的使用方法来使用的。前段时间写了个项目，但是使用element的图标的时候，怎么都不显示，官网上边给的案例都不显示，无奈之下，使用了阿里巴巴的iconfont。用了element UI2的图标，就按照2的使用方法去写，用了element UI3的图标，就按照3的使用方法去写。
问题解决：Element不显示Icon图标
qq_46093355的博客
05-03 7891
第一种方法 （1）在文件下方加入以下代码，如下图所示。 @import url("//unpkg.com/element-ui@2.15.6/lib/theme-chalk/index.css"); （2）结果 注：第一种方法在我的界面中有的有效果有的没有，具体原因还没找到。 第二种方法 以在登录的输入框引入Avatar图标为例，图标集合可以在这里面找图标名字：图标合集，链接失效的话直接百度搜索Element官网进去就有。 （1）终端安装 npm install @element-plus/icon
Element-ui关于el-icon无法正常显示的问题（已解决）
Astronaut224的博客
10-27 7122
在使用element-ui组件库的时候，使用自带的图标不显示，查了好多篇博客，都说是element-ui的版本老了，在package.json中修改版本重新安装就行，但是我的情况不是这样。
element-ui 自带图标无法显示（已解决）
今晚吃火锅的博客
03-19 1万+
使用vue时 ，引用el-menu组件发现自带的el-icon-arrow-down无法显示。 更换element-ui版本后依旧无法显示。 最后发现没有样式。 解决方法： 在main.js中引入对应样式： 这样就能显示出来啦，并不是因为版本问题或者是引入的路径不对。 ...
Vue elementui字体图标显示问题解决方案
10-14
主要介绍了Vue elementui字体图标显示问题解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
vue element项目引入icon图标的方法
08-27
Vue Element 项目引入 Icon 图标的方法 本文主要介绍了在 Vue Element 项目中引入 Icon 图标的方法，旨在帮助开发者快速和高效地引入 Icon 图标，以提高用户体验和降低页面加载速度。 引入 Icon 图标的必要性 在 ...
Vue Element使用icon图标教程详解(第三方)
08-28
Vue Element 使用 Icon 图标教程详解（第三方） 本教程将指导您如何在 Vue Element 中使用第三方 Icon 图标库，解决 Element UI 自带图标库不足的问题。 为什么需要第三方 Icon 图标库？ Element UI 自带的图标库...
详解Vue+elementUI build打包部署后字体图标丢失问题
10-15
主要介绍了详解Vue+elementUI build打包部署后字体图标丢失问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
【Element-UI】解决el-icon图标显示不出来的问题
热门推荐
AXIMI的博客
04-28 8万+
element-ui 图标icon的使用详见官网： https://element.eleme.cn/#/en-US/component/icon 问题背景： vue框架中使用element-ui，我的vue工程是使用脚手架创建的，是个vue webpack项目。 遇到的问题是： 在vue中加入elment-ui中的图标，但是页面上没有显示。页面部分代码为： <el-menu-item i...
【解决】使用Element-Plus icon图标不显示
weixin_44223180的博客
11-17 3819
Element-Plus官网：https://element-plus.org/zh-CN/component/icon.html。有时候从 Element-Plus 官网直接粘的组件代码中的 icon 用的可能是老的代码，比如。其次，当你使用的时候在< script steup >中引入需要的图标（以User图标为例）根据官网指引，在main.ts（如果是JavaScript就是main.js）中添加代码。已经安装：@element-plus/icons-vue。，我这边就显示不出来，需要改用。
VUE + Element UI 使用Element 中的Icon 图标无法显示
璎珞的博客
04-27 1万+
VUE + Element UI 使用Element 中的Icon 图标无法显示 有以下几种情况： 1）项目中引入的element-ui的版本过低了，低版本的icon中没有代码中需要的图标。比如我代码中使用的图标是<i class="el-icon-s-order"></i>，这个图标在低版本的element-ui中是没有的，所以显示不出来。需要在项目的package...
解决 element ui 本地使用 引入 图标不显示 .ttf和.woff 报错问题
书山有路勤为径，学海无涯苦作舟
03-31 4272
解决 element ui 引入在线地址更换为本地地址后 .ttf和.woff 报错问题。讲上图标记处位置修改为下图所示 修改找到对应文件的路径 完成即可。这里我是把 .ttf和.woff两个文件 放入了 css 文件夹内。根据控制台提示 发现少了.ttf和.woff两个文件。内的 .ttf和.woff两个文件的引入地址。下载完毕后放入文件夹内后修改。原因 因为文件内缺少两个文件。
Element-plus的icon图标不显示解决方案
ZYXKN的博客
01-27 3121
这篇文章就记录一下vue3环境下element-plus怎么使用icon图标
Vue3写后台管理系统时，使用element-plus icon图标时，页面没有显示出来，控制台警告： [Vue warn]: Failed to resolve component
m0_57255222的博客
08-10 2981
Vue3写后台管理系统时，使用element-plus icon图标时，页面没有显示出来，控制台警告： [Vue warn]: Failed to resolve component
elementui本地引入icon图标不显示问题
weixin_68729379的博客
09-19 2089
本地引入elementui时，icon图标不显示问题
elementui自定义icon图标
04-29
要在 ElementUI 中使用自定义图标，可以按照以下步骤操作： 1.准备好自己的图标文件，可以是 SVG、PNG、JPG 等格式。 2.在项目中创建一个 icons 目录，并将图标文件放入其中。 3.使用 iconfont 工具将图标文件转换为 iconfont 字体文件，生成的文件包括 CSS 文件和字体文件。 4.将字体文件和 CSS 文件放入项目中的 static 目录下。 5.在项目中引入字体文件和 CSS 文件： ```html <link rel="stylesheet" href="/static/iconfont.css"> ``` 6.在 ElementUI 中使用自定义图标，可以使用 el-icon-custom 样式类，并设置 content 属性为图标的 Unicode 编码： ```html <i class="el-icon-custom">&#x自定义图标的Unicode编码</i> ``` 其中，自定义图标的 Unicode 编码可以在 iconfont 工具生成的 CSS 文件中找到。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值