elementUI字体图标不显示问题
原文链接: 点我
自己搭建的Vue项目,没有使用vue-cli,引入elementUI时提示字体图标404,找不到文件,如下错误:
GET http://localhost:9090/WEB-INF/content/2fad952a20fbbcfd1bf2ebb210dccf7a.woff 404 (Not Found)
在网上查了下解决办法,是因为elementUI的字体图标是.woff和.ttf格式的,在webpack的loaders中需要配置,在module:{loaders:{ }}中新增内容,如下:
{
test: /\.(eot|svg|ttf|woff|woff2?)$/,
loader: 'file-loader'
}
然后通过npm安装file-loader依赖,命令如下:
npm/cnpm install file-loader --save
如果你足够幸运那么问题应该解决了。很不幸我就是不幸的那个,如果你也是,那么接着往下看
404没有了,可是引入的图标却成了这样子

所有字体图标全部显示方框。
多方查证才发现是安装的file-loader依赖和webpack版本冲突,但是又不敢随便修改webpack的版本,于是最后采用了一个方法,将file-loader更换为url-loader,于是问题圆满解决
附上module:{loaders:{ }}中新增的最终代码:
{
test: /\.(eot|svg|ttf|woff|woff2?)$/,
loader: 'url-loader'
}
然后 npm/cnpm install url-loader --save
我遇到这个问题 npm install解决了 原因是webpack.base.conf.js里边多了一个
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
},
分支代码有改动了,打包后的css文件里引用的字体路径不对了
原来的:
@font-face{font-family:element-icons;src:url(../fonts/element-icons.535877f.woff) format("woff"),url(../fonts/element-icons.732389d.ttf) format("truetype");font-weight:400;font-style:normal}
现在的
@font-face{font-family:element-icons;src:url(static/fonts/element-icons.535877f.woff) format("woff"),url(static/fonts/element-icons.732389d.ttf) format("truetype");font-weight:400;font-style:normal}
结论:相对路径引用错了,"static" 替换成 ".." 指向上一级的同级目录下的fonts/
elementUI字体图标不显示问题的更多相关文章
- BootStrap字体图标不显示、下拉菜单不显示
在W3CSchool学习BootStrap教程时遇到的问题…… 1.字体图标不能显示 上面是正常显示的样子,不能正常显示,因为缺少下面的字体图标样式文件 (1)在下载的Bootstrap包中将font ...
- Chrome 对于 glyphicon 字体图标不显示的解决的方法
在将Chome默认字体渲染为微软雅黑后,部分字体图标显示为方框,这里Chome扩展文档提供的解决的方法为: 找到 custom.css 文件,路径为: C:\Users\(username)\App ...
- vue iView 打包后 字体图标不显示
问题描述: 今天webpack打包后发现iView 字体图标不显示 解决方案: build/webpack.prod.conf.js 这个文件里面 module: { rules: utils.sty ...
- webpack打包绝对路径引用资源和element ui字体图标不显示的解决办法
webpack打包绝对路径引用资源解决办法: 打开webpack.prod.conf.js 找到output:增加 publicPath: './', 即可,如图 element ui字体图标不显 ...
- 移动端字体图标不显示的Bug
用16进制编码的字体图标在部分小米机型显示不正常. 测试机型:小米1,小米1s,小米2浏览器:微信6.1内置浏览器,QQ浏览器 5.7 X5内核字体图标:不显示svg图标:显示正常 以下来自额微信内置 ...
- bootstraps字体图标无法显示
使用bootstraps字体图标,必须在css的同级文件夹下,建立新的文件夹为fonts,放入一下文件. 在还是无法显示字体图标的情况下,可查看bootstraps.css中的 @font-face ...
- react中iconfont字体图标不显示问题
如下图, 写四个圆圈,直接将iconfont的字体编码写在静态HTML结构中时显示没问题,然而明显这样的结构用循环写是更好的选择, 但是,页面上不能显示字体图片了,而是直接显示字体编码 原因是字体编码 ...
- thinkphp使后台的字体图标显示异常
thinkphp使后台的字体图标显示异常 相似问题 1.thinkPHP的这些图标都不显示了-CSDN论坛https://bbs.csdn.net/topics/391823415 解答: 发现在别的 ...
- css精灵图&字体图标
精灵图 为什么需要精灵图 为了有效的减少服务器接收和发送请求的次数,提高页面的加载速度.出现了CSS精灵技术 精灵图(sprites)的使用 精灵技术主要针对背景图片.就是把多个小背景图片整合到一张大 ...
随机推荐
- 【php】日期时间
一. 日期时间: a) 这是一块非常重要的内容,我们在windows当中,或者是将来要接触的定时器也好,都是需要使用到这一块内容的!二. PHP当中的日期时间: a) 时间戳:time()可以获取时间 ...
- discuz 用户整合 账号整合 ucenter php网站整合discuz用户
引用:https://www.cnblogs.com/kenkofox/archive/2011/09/18/2180649.html 1.登录后台管理.(在论坛中,用创建论坛的admin账号登陆,然 ...
- vue-shop项目第一天(用于记录 个人学习)
vue-shop 第一天 一.项目初始化 1.安装vuecli脚手架(依赖于webpack)[前端自动构建工具]. 2.安装插件(element-ui)[第三方插件库], 安装依赖(axios)[调用 ...
- go 闭包函数
一.什么是闭包函数? 二.匿名函数可以被赋值给变量并作为值使用: package main import "fmt" func main(){ f() } func f(){ fo ...
- ubuntu 虚拟机复制后打开蓝屏解决办法
sudo apt-get install xserver-xorg-lts-utopic sudo dpkg-reconfigure xserver-xorg-lts-utopic reboot
- matplotlib TransformWrapper
2020-04-09 23:26:53 --Edit by yangray TransformWrapper 是Transform的子类, 支持在运行中替掉一个变换(可以是不同类型, 但维度必须相同) ...
- tf.nn.relu 激活函数
tf.nn.relu(features, name = None) 计算校正线性:max(features, 0) 参数: features:一个Tensor.必须是下列类型之一:float32,fl ...
- delphi使用ADO在sql数据库存取图片的方法
我一直不认为能把代码写的和天书一样的程序员是好的程序员,那不过是因为我真的对delphi也就是略懂皮毛,太深了看不懂.网上查询数据库存取图片的方式,看的是一头雾水,有人提出保存路径使用时再调用,方法很 ...
- B - Red and Black 直接BFS+队列
There is a rectangular room, covered with square tiles. Each tile is colored either red or black. A ...
- SQLi —— 逗号,空格,字段名过滤突破
前言 出于上海大学生网络安全大赛的一道easysql,促使我积累这篇文章.因为放了大部分时间在Decade和Babyt5上,easysql一点没看,事后看了WP,发现看不懂怎么回事,于是了解了一番. ...