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

https://blog.csdn.net/m0_37893932/article/details/79460652
<https://blog.csdn.net/m0_37893932/article/details/79460652>

*********************************************************

前言

官方推荐的css及js引用方式如下:
 <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>
*
这种方式引入,如果环境只有内网,没有外网的话,会导致页面直接空白.

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

<>分析

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

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

解决办法

访问
https://unpkg.com/element-ui@1.4.13/lib/theme-default/fonts/element-icons.woff?t=1472440741
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 }
####安装地址

http://element-cn.eleme.io/#/zh-CN/component/installation
<http://element-cn.eleme.io/#/zh-CN/component/installation>

字体的路径

https://unpkg.com/element-ui@2.4.6/lib/theme-chalk/fonts/
<https://unpkg.com/element-ui@2.4.6/lib/theme-chalk/fonts/>

热门工具换一换