前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Element UI本地引用及图标显示异常问题

Element UI本地引用及图标显示异常问题

作者头像
崔笑颜
发布2020-06-08 15:58:21
发布2020-06-08 15:58:21
3.2K10
代码可运行
举报
运行总次数:0
代码可运行

本地引用

按照官方的推荐引用方式是:

代码语言:javascript
代码运行次数:0
运行
复制
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui@1.4/lib/theme-default/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui@1.4/lib/index.js"></script>

想要本地引用就直接打开这两个链接去下载对应的js和css文件就好了。 因为我的项目比较老,所以这里使用本地引用

图标异常问题

将上述两个文件引入后,样式可以正常使用,但图标无法正常显示。

解决方法: 首先按照上述贴出的官方推荐引用方式引用css和js,用浏览器打开测试页面,此时图标是正常显示的,但换为本地的引用后就会异常;此时使用浏览器的开发者工具,找到图标正常显示情况下的请求地址:

找到地址https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/fonts/element-icons.woff后直接选中右键跳转,浏览器会自动下载该图标相关文件;最后将下载好的图标文件放到css目录下的fonts目录下即可,没有则新建fonts目录,按照这个路径放图标文件都不用去改css中图标的路径。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-05-26,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 本地引用
  • 图标异常问题
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档