首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Element UI本地引用及图标显示异常问题

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

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

本地引用

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!-- 引入样式 -->
<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 删除。

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

评论
登录后参与评论
1 条评论
热度
最新
非常感谢!
非常感谢!
回复回复点赞举报
推荐阅读
编辑精选文章
换一批
Vue-CLI项目快速UI布局-element-ui
https://element.eleme.cn/#/zh-CN/component/installation
小小咸鱼YwY
2019/09/11
5950
只需要3招将你的Vue项目访问时间从1分钟缩短到3秒以内
基于Vuecli搭建的vue项目简单快捷,易于开发。在node.js的加持下你可以更快的引入万千JavaScript开发库,仅仅依靠前端就可以实现以前使用后端才能实现的功能,如通过axios便可以快捷的与后端进行数据交互等。
IT大咖说
2020/10/19
1.1K0
只需要3招将你的Vue项目访问时间从1分钟缩短到3秒以内
jsp使用vue+element-ui
因需要做界面美化,所以需要使用element-ui,原生jsp能实现的效果,实在是太少了。
崔笑颜
2020/06/08
4K0
h5引用vue
直接贴代码,方便以后使用 <!DOCTYPE html> <html>   <head>     <meta charset="UTF-8" />     <!-- 引入样式 -->     <link       rel="stylesheet"       href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"     />     <!-- 先引入 Vue -->     <script src="https://unpkg.com/
biaoblog.cn 个人博客
2022/08/11
6730
EasyNVR接口二次开发通道配置文件上传下载实例
EasyNVR能够通过简单的网络摄像机通道配置,将传统监控行业里面的高清网络摄像机IP Camera、NVR等具有RTSP协议输出的设备接入到EasyNVR,EasyNVR能够将这些视频源的音视频数据进行拉取,转换为RTMP/HLS,进行全平台终端H5直播(Web、Android、iOS),并且EasyNVR能够将视频源的直播数据对接到第三方CDN网络,实现互联网级别的直播分发;
EasyNVR
2020/04/23
5480
EasyNVR接口二次开发通道配置文件上传下载实例
从 Element UI 源码的构建流程来看前端 UI 库设计
由于业务需要,近期团队要搞一套自己的UI组件库,框架方面还是Vue。而业界已经有比较成熟的一些UI库了,比如ElementUI、AntDesign、Vant等。
前端森林
2020/06/28
2.1K0
Django simpleUI 修改 element-UI 引用的 index.js 和 index.css 链接 以及 base.html 的 vue 资源链接
在 simpleUI 下面的 templates(../site-packages/simpleui/templates/admin) 里面找到 base.html, index.html, login.html 有引用这个三个文件(element-ui/2.13.0/theme-chalk/index.css, element-ui/2.13.0/index.js, vue.min.js),遂修改之。
卓越笔记
2023/02/18
7490
Django simpleUI 修改 element-UI 引用的 index.js 和 index.css 链接 以及 base.html 的 vue 资源链接
Vue Element入门教程
其中node_modules是你安装的依赖,也就是你执行完npm install命令安装的东西;assets可以存放一些公共的样式、图标等;components里放的是你写的组件;router放的是页面的路由;views里可以放你自己写的一些页面;App.vue是页面的入口;main.js是js文件的入口,你需要在这里面把你写的js引进去;static可以放一些图片、图标等。
全栈程序员站长
2022/08/26
4610
Vue Element入门教程
【Vue】Vue集成Element-UI框架
Element-UI官网:点击进入 Element-UI 是一套基于 Vue 2.0 的桌面端组件库,由饿了么前端团队推出并进行开源。它提供了丰富的 PC 端组件,简化了常用组件的封装,大大降低了开发难度,使开发人员能够轻松构建功能强大、风格统一的页面。Element-UI 与 Vue.js 集成非常紧密,开发者可以轻松地将 Element-UI 的组件嵌入到他们的 Vue.js 应用程序中。
颜颜yan_
2024/03/24
4440
【Vue】Vue集成Element-UI框架
EasyNVR配置表单上传demo说明
从功能上来说,EasyNVR自身因其界面美观,不仅可以单独作为音视频流媒体业务系统使用,也可以作为设备端与第三方平台接入使用;从界面来说,简洁,明朗,更加方便用户操作。在用户使用过程中,我们也会根据用户的需求对相关功能进行优化和提升,满足绝大多数用户的需求。本文我们分享一下EasyNVR配置表单上传demo说明。
TSINGSEE青犀视频
2021/09/18
5110
Vue + Element UI 实现权限管理系统 前端篇(六):更换皮肤主题
首先安装「主题生成工具」,可以全局安装或者安装在当前项目下,推荐安装在项目里,方便别人 clone 项目时能直接安装依赖并启动。
朝雨忆轻尘
2019/06/18
1.5K0
基于Vue、ElementUI的换肤解决方案
换肤这个功能,不能算是很常见,但是也是有需求的,所以这里提供几种前端的换肤解决方案,供大家参考。
零式的天空
2022/03/27
5.6K2
基于Vue、ElementUI的换肤解决方案
【Python100天学习笔记】Day29 UI框架-Element
UI框架 - Element 基于Vue 2.0的桌面端组件库,用于构造用户界面,支持响应式布局。 引入Element的CSS和JavaScript文件。 <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 引入组件库 --> <script src="https://unpkg.com/element-ui/lib/index.js"></scrip
天道Vax的时间宝藏
2022/04/01
2670
【Python100天学习笔记】Day29 UI框架-Element
Vue + Vuex + Element UI实现动态全局主题颜色
经常用Element UI的小伙伴,应该知道,Element UI官方文档,可以自由更换主题。那么,我们怎么把这个功能用到自己项目中呢?其实官方文档也有所说明,这里对其进行更详细,更明确的说明,同时提供简单示例,供大家参考。
Javanx
2019/09/04
4.2K0
Vue + Vuex + Element UI实现动态全局主题颜色
cdn方式使用vue和element-ui进行前端开发
按照vue和element-ui的官网开发指南中提供的cdn安装方式,直接以script方式引入。 要注意引入顺序
菲宇
2022/05/13
1.3K0
cdn方式使用vue和element-ui进行前端开发
vue线上项目加载速度提升
首先在index.js里面引入一些cnd资源(vue,vueRoute,elementUI)
biaoblog.cn 个人博客
2022/08/11
4700
Vue webpack 压缩打包上线 首屏加载时间过长 优化方案
最近博客上线,但是在首次加载的时候,需要消耗很多时间,大概在50秒左右,就是说第一页登录页面,就需要用户等待50秒(服务器是最低配置也是一个原因),看了一下network,发现有两个文件加载的时间特别长,一个是vendor.js,一个是app.js,打包的时候,这两个文件也提示文件过大
Autooooooo
2020/11/09
2K0
Vue webpack 压缩打包上线 首屏加载时间过长 优化方案
vue2.0项目引入element-ui
在项目中,为了方便我们工作和开发效率,常常引入一些框架来帮助我们完成高效的工作,今天我们就用vue来搭建一下框架,并且引入element-ui这个框架。安装流程也是我从失败中摸索到的,希望能帮助大家。
小周sir
2019/09/23
8440
vue2.0项目引入element-ui
纯静态引入.vue文件之http-vue-loader.js
在最早之前,我做过纯静态的项目引入vue当作模板引擎,就是那种没有任何打包压缩的项目,就是单纯的引入css、js、html的项目。现在应该是很少有这样的项目了,很少不代表没有,起码我现在在撸jq的项目(现在jq贼溜)。
wade
2021/10/25
3.7K0
纯静态引入.vue文件之http-vue-loader.js
SpringBoot的前后端分离--下拉数据
后台:gitee:https://gitee.com/zhangjiqun/background-development-demo.git
zhangjiqun
2024/12/16
1260
SpringBoot的前后端分离--下拉数据
相关推荐
Vue-CLI项目快速UI布局-element-ui
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档