elementUi字体图标出现跨域加载不出来，或者在本地使用elementUi的时候引入字体文件

月落星河°

于 2020-12-15 18:26:34 发布

阅读量2.6k

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/wangzongyang1025_/article/details/111228730

VUE 专栏收录该内容

29 篇文章

订阅专栏

本文探讨了如何在传统项目中将线上Element UI的字体资源复制到本地，并解决由于路径问题导致的样式缺失。作者分享了通过@font-face规则引入字体文件的方法，适用于Vue项目转为jq+html+css的情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接上错误，这是使用的elementUi直接上面加载不出来
在这里插入图片描述

线上的这个地址不知道为什么引入不进去，我们可以从element中把这个文件拿到本地来，在本地引入，代码如下：

@font-face {
    font-family:"element-icons";
   src: url(../lib/fonts/element-icons.ttf);
}
@font-face {
    font-family:"element-icons";
    src: url(../lib/fonts/element-icons.woff);
 }

如果你在本地使用element的样式库的时候也要这么干，因为我的vue项目要改成传统的项目，使用jq+html+css，因为这个vue已经部署在线上了，那么我直接从控制台拿到HTML就可以，但是有一些element的样式，需要引入element的样式，然后再有jq去处理它的逻辑，我一看是使用的是cdn的连接引入的是没问题，但是我们cdn的element样式下载到本地，那你的font文件也是找不到的，你也需要上面的办法引入一下