elementUI本地引js,css 图标不显示问题

2023-11-26 23:09:34

项目中有用到图标但是遇到了一些问题在此仅做下记录

1.按官方文档用CDN安装方式：（缺点是没有网络情况下加载不出）

2,将两个文件下载为离线模式后，引入之后发现图标不显示

3.原因在本地的index.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/browse/element-ui@2.14.1/lib/theme-chalk/fonts/），下载后在css目录下创建fonts文件夹，放进去以后依然会警告，突变有而不显示，见下图：

4,终极解决方案：

找一个空目录，然后通过npm 安装方式下载element-ui,见图

然后进入：E:\Desktop\ewqe\node_modules\element-ui\lib\theme-chalk\fonts 目录找到字体文件直接复制到 css --> fonts 下即可：