当前位置:网站首页 > 网站 > 正文

Element在线引入加载太慢,本地引用Iconfot图标不显示怎么解决

作者:Admin 发布时间:2020-09-07 分类:网站 浏览:562 评论:0


Element官方推荐在线CDN引入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>

但是打开网站加载速度太慢,如果没有网络,页面会显示错乱或者空白,影响用户体验。

简单的方法就是把引用的CSS和JS文件内容拷贝到本地,网站加载速度变快了,但是又出现一个问题,就是Iconfot图标不显示了。

查找原因

F12查看网络发现ICON的请求地址:https://unpkg.com/element-ui/lib/theme-chalk/fonts/element-icons.woff

在本地的index.css文件中发现网络请求icon的代码

@font-face {
font-family: element-icons;
src: url(fonts/element-icons.woff) format("woff"),url(fonts/element-icons.ttf) format("truetype");
font-weight: 400;
font-display: "auto";
font-style: normal
}

解决办法

打开地址:https://unpkg.com/element-ui/lib/theme-chalk/fonts/element-icons.woff

下载element-icons.woff文件到本地,放到项目的css/fonts文件夹下即可,这样就可以引用本地文件,图标可以正常显示出来了。

标签:ElementICONJSCSS网站


取消回复欢迎 发表评论:

  • 请填写验证码
网站排行
最近发表
最新留言
标签列表

关灯