更新elementui图标不显示_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:{ }}中新增内容，如下：

1 {2 test: /\.(eot|svg|ttf|woff|woff2?)$/,3 loader: 'file-loader'

4 }

然后通过npm安装file-loader依赖，命令如下：

npm/cnpm install file-loader --save

如果你足够幸运那么问题应该解决了。很不幸我就是不幸的那个，如果你也是，那么接着往下看

404没有了，可是引入的图标却成了这样子

image.png

所有字体图标全部显示方框。

多方查证才发现是安装的file-loader依赖和webpack版本冲突，但是又不敢随便修改webpack的版本，于是最后采用了一个方法，将file-loader更换为url-loader，于是问题圆满解决

附上module:{loaders:{ }}中新增的最终代码：

1 {2 test: /\.(eot|svg|ttf|woff|woff2?)$/,3 loader: 'url-loader'

4 }

然后 npm/cnpm install url-loader --save

我遇到这个问题 npm install解决了原因是webpack.base.conf.js里边多了一个

1 {2 test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,3 loader: 'url-loader',4 options: {5 limit: 10000,6 name: utils.assetsPath('fonts/[name].[hash:7].[ext]')7 }8 },

分支代码有改动了，打包后的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图标不显示_elementUI字体图标不显示问题相关推荐

上传服务器后字体文件丢失,详解Vue+elementUI build打包部署后字体图标丢失问题...
错误描述: Vue+elementUI build打包部署后字体图标丢失,控制台显示文件element-icons.woff和element-icons.ttf文件404 错误展现: 控制台报错截图 ...
jsp中不能正常显示图片+不能正常显示bootstrap字体图标
一直以来,bootstrap框架下的轮播图在jsp中不能正式显示,我本以为是配置问题,导致bootstrap和jsp不一样. 话不多说,上图: 前期: 这是一个轮播图,可以看到第一:图片不能显示,我的 ...
html页面icon字体无法显示,Bootstrap字体图标无法正常显示的解决方法
bootstratp作为一个优秀的前端框架,最近使用了其中的Glyphicon Halflings的字体图标.起初一直显示不出来,后面通过搜索相关资料直到成功显示,在此做一些总结,方便后面复习. 1. ...
【html】如何处理显示ttf字体图标
当看到某些文件的后缀名是ttf,表示是字体文件,除了显示字体,还能显示图标,如果需要显示的图标太多,就把它们放在一个文件中,方便统一管理图标,在此讲一下怎么显示字体图标. 打开文件电脑上用什么工具打 ...
字体图标使用教程阿里字体图标iconfont 鲸鱼编程
官方网址 iconfont-阿里巴巴矢量图标库 https://www.iconfont.cn/ 注册并登陆寻找自己喜欢的图标添加首次使用新建一个项目生成代码需要点一下生成后的结果使用字 ...
css中的代码图标,认识CSS中字体图标(示例代码)
前端之HTML,CSS(十一) 字体图标使用文字做出小图标的效果并超越了小图标应用精灵图,使得图标变得灵活,减少了请求次数,优化了界面的性能.字体图标本身为矢量图. 字体图标的使用过程 1.UI设计 ...
使用阿里巴巴图标库生成iconfont字体图标
iconfont字体图标就是用字体来代替图标.图片文件的做法,并且通过字体图标可以对图标的大小.颜色等进行控制,但是缺点就是只能实现一种颜色,不能像图片那样含有各种颜色. 通过阿里巴巴图标库制作字体图 ...
如何使用阿里巴巴矢量图标库下载使用字体图标？
1:在百度搜索"阿里巴巴矢量图标库"进入,注册并登录. 2:搜索自己想要的字体图标,然后加入购物车,点击添加至项目. 3:在项目中点击下载至本地,解压缩包. 4:如下图所示,使用l ...
ant-design-vue 自定义图标，关联阿里巴巴字体图标库，项目已有图标，新下载的图标要重命名重新保存
前一段时间在项目中引入阿里巴巴字体图标库的图标,按步骤走了一遍,但是一直不成功. 刚好需求改了,不需要用图标,就暂时搁浅没在管这个. 今天又有新的需求要用到字体图标,在ant-design-vue官方 ...

更新elementui图标不显示_elementUI字体图标不显示问题

更新elementui图标不显示_elementUI字体图标不显示问题相关推荐

最新文章

热门文章