element-ui图标不显示问题(已解决）

最新推荐文章于 2024-08-20 22:19:08 发布

The Winter dumpling

最新推荐文章于 2024-08-20 22:19:08 发布

阅读量8.3k

点赞数 2

本文链接：https://blog.csdn.net/sagiiiii/article/details/123243615

版权

这篇博客探讨了在使用Element-UI时遇到图标不显示的问题，并提供了三种解决方法：1. 修改package.json中Element-UI的版本；2. 在main.js中统一注册图标；3. 如果前两种方法无效，尝试在bulid/utils.js中进行特定配置。

摘要由CSDN通过智能技术生成

方法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

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

The Winter dumpling

关注关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

使用element组件不显示图标解决方法

shmily_yz的博客

11-17

8575

因为element版本的问题导致部分图标不显示，在这里，我找到了两种解决方法第一种、也是相对简单的一种，我们只需要在文件中的最下方加入 /* qq：1098935671 */ <style> @import url("//unpkg.com/element-ui@2.15.6/lib/theme-chalk/index.css"); </style> 即可实现显示图标，这种方法就是相当于引用了老版的element的一个css样式库。第二种、也是正式的一种，这种方法是我请教了

Element-ui项目打包后icon图标/登录背景图不显示

xiaohuichonga的博客

03-22

478

登录背景图,页面element-ui字体图标不显示问题

参与评论您还未登录，请先登录后发表或查看评论

element-ui图标显示不出来问题

weixin_46106879的博客

12-31

3649

@[element-ui显示不出来问题] 1.原因：由于项目中ele版本过低，低版本中没有需要的图标。 2.解决方案： ① package.json文件中修改element-ui的版本号。 ②使用npm install 重新安装依赖包。 ③npm run dev 重新运行项目。 ...

element-ui 图标不显示

qq_28131031的博客

07-30

279

vue旧项目升级最后导致icon不显示，原因是url-loader版本太高，或者和file-loader版本不匹配

elementui图标显示不出来

weixin_45599105的博客

08-11

584

elementui图标显示不出来

普通HTML页面引用elementui图标不显示

小志的博客

06-17

436

找一个vue项目（没有的话就新建一个空文件下载依赖 npm i element-ui -S），进到node_modules==>element-ui==>lib==>theme-chalk里面的fonts文件夹复制到css中。普通HTML页面引用elementui图标不显示。我是下载到本地引入的，后面发现图标不显示。

阿里小图标用以替代element-ui图标

08-10

在开发Vue项目的前端界面时，我们常常会遇到Element-UI提供的图标集无法满足设计需求的情况。Element-UI作为一款流行的Vue组件库，虽然其内置的图标集覆盖了基础的使用场景，但面对更加个性化的图标设计，其自身的...

element-ui离线包.zip

01-13

4. **图标资源**：Element UI 使用了一套自定义的图标集，这些图标可能以 `.svg` 或 `.woff` 等格式存在。图标文件可以被引入到项目中，使得组件能够正确显示图标。 5. **其他资源**：可能还包含一些辅助文件，如...

element-ui中dialog弹窗关闭按钮失效的解决

10-14

在使用element-ui的el-dialog组件时，有时可能会遇到关闭按钮失效的问题。这个问题可能是由于多种原因导致的，比如数据绑定或者事件监听设置不当等。在element-ui中，Dialog组件的使用是相对直观的，但有时在复杂的...

element-ui_2.15.1.zip

03-09

这个离线安装包适合那些在没有网络或者网络环境不稳定的情况下进行 Element UI 开发的用户。 Element UI 主要包含以下几大类组件： 1. **布局组件**：如 Container、Row 和 Column，它们帮助你快速搭建页面的基本...

使用Element UI组件时，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...

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 图标不显示

qi__lu的博客

05-23

714

今天突然试了一下，好像是反应了过来，项目是vue3，用的element UI图标也是UI3的图标，但是使用的时候，我是按照UI2的使用方法来使用的。前段时间写了个项目，但是使用element的图标的时候，怎么都不显示，官网上边给的案例都不显示，无奈之下，使用了阿里巴巴的iconfont。用了element UI2的图标，就按照2的使用方法去写，用了element UI3的图标，就按照3的使用方法去写。

element图标显示不出来,elementui图标显示异常

aifans_bert的博客

09-11

3345

Laydate控件如何只显示年份如下所示在下面加入css样式便只显示年份了.laydate_m,.laydate_table{ display:none;} Laydate控件如何只显示时分秒#laydate_box.laydate_top,#laydate_box.laydate_table,#laydate_today{display:none;}当然都还需要对应修改下面的format$(document).ready(function(){laydate({elem:'#haha',//目标元素。

vue+element当鼠标停留在i标签上时显示文字提醒

06-08

可以使用Element UI提供的Tooltip组件来实现这个功能。具体实现步骤如下： 1. 在需要显示提示的i标签上添加Tooltip组件，设置提示内容。 ```html <el-tooltip content="这是提示内容"> <i class="el-icon-info"></i> </el-tooltip> ``` 2. 如果需要自定义提示内容，可以使用v-slot插槽。 ```html <el-tooltip> <i class="el-icon-info"></i> <div slot="content"> <p>这是自定义提示内容</p> </div> </el-tooltip> ``` 3. 如果需要在鼠标停留一定时间后才显示提示，可以设置delay属性。 ```html <el-tooltip content="这是提示内容" :open-delay="1000"> <i class="el-icon-info"></i> </el-tooltip> ``` 其中，open-delay属性的值表示延迟显示提示的时间，单位为毫秒。 4. 如果需要在i标签上显示提示文字，可以设置append-to-body属性为false。 ```html <el-tooltip content="这是提示内容" :append-to-body="false"> <i class="el-icon-info"></i> </el-tooltip> ``` 设置append-to-body属性为false后，提示内容将显示在i标签的下方。希望以上内容可以帮助到你，如果还有疑问请随时追问。