非网络引用element-ui css导致图标无法正常显示的解决办法

版权声明: https://blog.csdn.net/qq_18298439/article/details/80693816

前言

官方推荐的cssjs引用方式如下:

<!-- 引入样式 -->
<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>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> 

这种方式引入,如果环境只有内网,没有外网的话,会导致页面直接空白.


很简单把csshrefjssrc的网址输入浏览器可以得到cssjs的源码,直接拷贝到本地即可. 
但是问题来了,element-uiindex.css拷贝本地之后,会发现图标无法正常显示了.

分析

F12查看网络发现icon的请求地址 

 
点开详情发现请求链接(element版本不同这里网址应该也是不同的) 

解决办法

访问https://unpkg.com/element-ui@1.4.13/lib/theme-default/fonts/element-icons.woff
element-icons.woff文件自动下载下来,放到项目的/css/fonts文件夹下即可

原因

在本地的index.css中发现如下代码是网络请求icon

@font-face {
    font-family: element-icons;
    src: url(fonts/element-icons.woff?t=1472440741) format('woff'), url(fonts/element-icons.ttf?t=1472440741) format('truetype');
    font-weight: 400;
    font-style: normal
}
阅读更多 登录后自动展开
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页