本地引用element ui css导致图标不显示

官方推荐引入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>

这种方式引入会导致页面加载很慢，并且在没有外网的时候会导致页面空白

所以我把js文件和css文件放到了本地

<link rel="stylesheet" href="/style/pc/manage/element.css">
<script src="/scripts/pc/index/hz_3/element.js"></script>

这样做发现图标不出来。

原因：

在本地的element.css中发现如下关于字体图标的代码是网络请求的

@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
}

解决方式：

在这个链接里https://unpkg.com/element-ui@2.10.1/lib/theme-chalk/fonts/  把两份字体文件下载下来 然后在你.css文件同级目录下新建一个fonts文件夹，把刚才下载的两份文件放进去，即可