非網絡引用element-ui css導致圖標無法正常顯示的解決辦法

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

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

前言

官方推薦的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的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

字體的路徑

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