从element ui 中引入 图标 页面没有反应

最新推荐文章于 2024-03-25 17:42:59 发布
最新推荐文章于 2024-03-25 17:42:59 发布
阅读量257 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/objectofall/article/details/134048685
版权

切记：vue3 项目 用的 是 element ui plus 组件库 ，不是 element ui 组件库！！！

vue3 对应 的是 element ui plus 

vue2  对应的是 element ui

首先 需要 安装 图标

然后 引入 到标签中

再到 script 标签中引入

最后成功出现 图标

一定要记住 vue3 项目 用的 是 elementUi plus 组件库

one shepherd
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Element-UI本地引入
09-17
Element-UI本地引入，在jsp里不能通过url引入就只能用本地引入了（注意修改css中关于字体和图标的位置链接）
element ui 离线压缩版 js css 含图标
03-15
页面内引用element ui的js 及css离线版 便于不想通过webpack 打包和前后端分离使用
新建Vue项目 并引入element ui（cmd中vue ui没有反应的解决办法）
weixin_46483006的博客
07-18 2936
我们需要的是NodeJS里npm工具，npm是NodeJS下的一个包管理工具，它可以很方便的帮你管理（可以简单理解为下载）各类前端的框架或插件。附安装教程：http://jingyan.baidu.com/article/b0b63dbfca599a4a483070a5.html。2、输入之后，自动弹出网页，进行新建项目。我们可以去官网下载https://nodejs.org/zh-cn/download/（项目名中不能有大写字母，会报错，可以加-）vue -V(大写的V)，查看是否安装成功。...
引入ElementUI样式不生效
weixin_43949957的博客
09-17 1676
引入ElementUI样式不生效 import ElementUI from 'element-ui' //这句很重要 import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI)
【已解决】vue3+ts使用Element-Plus icon图标不显示|element plus 使用 icon 图标教程
最新发布
肥晨开发的学习之路
03-25 3285
Element Plus 的图标组件也支持自定义图标。你可以通过 el-icon 组件的 name 属性来指定一个自定义图标的类名，并在你的 CSS 中定义这个类名对应的图标样式。/* 或者使用字体图标 *//* 其他样式 */确保你的自定义图标样式正确无误，并且图标的路径也是正确的。如果你使用的是字体图标，你可能需要设置 font-family 和其他相关属性。您好，我是肥晨。欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。
HTML页面引入ElementUI库时样式失效的解决方法（亲测可行）
k912120的博客
06-07 5536
HTML页面引入ElementUI库时样式失效的解决方法（亲测可行）
记录一次Vue3.0引入ElementPlus之后样式不生效的一个大坑
KimiKudo的博客
11-22 9614
事情是这样的，我呢，主要是做后端的，很少碰前端，而且真心不擅长前端，每次碰都特别痛苦。但是最近实在是有点闲，为了能优化一下我前一阵做的一个服务型项目，准备加几个页面实现配置业务参数和查询执行记录之类的功能。所以上网看了看教程，搭了一个VUE3.0的项目，并且准备用ElementUI为VUE3.0推出的ElementPlus作为UI库。 于是我就按照教程，使用VUE/CLI脚手架搭了一个项目，并且配置了vue.config.js的配置文件（这里画个重点要考的！），然后按部就班配置了vue-router和ele
本地引用element ui css导致图标不显示
_NIXIAKF的博客
11-19 1719
官方推荐引入css和js的方式 <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 引入组件库 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> 这种方式引入会导致页面加载，并且在没有外网的时候会导
vue element项目引入icon图标的方法
12-07
为了减少页面的加载速度,提高用户体验,对于一些图片决定使用图标代替,但是发现element-ui的图标少得可怜,完全满足不了我的要求,于是决定在element-ui的项目里引入第三方的图标库. 因为阿里巴巴海量的图标,所以决定...
element-ui 的el-button组件中添加自定义颜色和图标的实现方法.docx
01-13
element-ui 的el-button组件中添加自定义颜色和图标的实现方法.docx
Vue Element使用icon图标教程详解(第三方)
08-28
element-ui自带的图标库不够全，还是需要需要引入第三方icon。下面小编给大家带来了Vue Element使用icon图标教程，感兴趣的朋友一起看看吧
有关Vue引入element-ui模板无效果的解决方案
qq_45353823的博客
07-19 2124
当我在使用element-ui里面的容器模板的时候，并没有官方文档的效果，只是出现了一行文字信息 <template> <div id="app"> <el-container style="height: 500px; border: 1px solid #eee"> <el-aside width="200px" style="background-color: rgb(238, 241, 246)"> <el
记录ElementUIPlu使用图标不起效问题
我要记录学习博客
11-27 1171
跟着官网提供的方法进行安装依赖，通过svg可以显示图标出来入如果使用标签引入就不起效如下记录1、官方说的是拉取2、官网拷贝的图标。
Vue-cli脚手架项目引入Element-Ui不生效问题
weixin_43403746的博客
09-27 2040
背景： 已经很久没有初始化项目了，今天在初始化项目引入element-ui插件时发现居然没有生效，最直观的就是没有标签提示。我是通过npm安装element-ui。 npm i element-ui -S 然后在main.js文件中引入了安装好的element-ui并使用。 但使用时并没有标签提示，而且效果也没有出来。 解决方案： 查了后才发现，除了要引入element-ui外，还需要引入它对应的css包，也就是需要将下面这句话写入到main.js中。 import ‘element-ui/lib
用了elementui中的组件，设置样式时始终不生效的解决方案
qq_52526079的博客
11-24 2298
后使用到里面样式的dom会添加data-v-xxxx这种属性防止css污染，但是message生成的dom是没有添加data-v-xxx属性的，所以样式无效。原因：可能是因为加了。
element-ui 引入及使用中的报错、失效
weixin_44224712的博客
06-04 1241
Error: Cannot find module 'babel-preset-es2015'
elementui图标组件不生效的解决方案
weixin_45874118的博客
06-07 3320
vue项目在用elementui时，想引用里面的图标库，如下图
element ui 中el-button自定义icon图标不生效问题解析
苦修的木鱼博客
03-20 6122
element ui 中el-button自定义icon图标不生效问题解析
element ui中icon图标乱码
03-28
如果在 Element UI 中使用 icon 图标出现乱码，可能是因为没有正确引入字体文件。可以按照以下步骤尝试解决： 1. 确认已正确引入 Element UI 的样式文件和字体文件。 2. 检查是否在使用 icon 时指定了正确的字体家族名称。 例如，如果使用的是默认的 Element UI 主题，应该使用 "element-icons" 作为字体家族名称： ```html <el-icon class="el-icon-success" :style="{ fontFamily: 'element-icons' }"></el-icon> ``` 3. 如果仍然出现乱码，可以尝试手动下载 Element UI 的字体文件并引入到项目中。 字体文件可以在 Element UI 的 GitHub 仓库中找到： https://github.com/ElemeFE/element/tree/dev/packages/theme-chalk/src/fonts 下载对应的字体文件（例如 element-icons.ttf），放到项目的静态资源目录中，并在样式文件中引入： ```css @font-face { font-family: 'element-icons'; src: url('./static/fonts/element-icons.ttf') format('truetype'); } ``` 然后在使用 icon 时指定字体家族名称为 'element-icons' 即可： ```html <el-icon class="el-icon-success" :style="{ fontFamily: 'element-icons' }"></el-icon> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值