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没有了,可是引入的图标却成了这样子

image.png

所有字体图标全部显示方框。
多方查证才发现是安装的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

原文地址:https://www.cnblogs.com/myfate/p/11331881.html

时间: 2024-10-15 03:04:58

elementUI字体图标不显示问题的相关文章

Chrome 对于 glyphicon 字体图标不显示的解决的方法

在将Chome默认字体渲染为微软雅黑后,部分字体图标显示为方框,这里Chome扩展文档提供的解决的方法为: 找到 ?custom.css 文件,路径为: C:\Users\(username)\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets 改动或添加内容为: .glyphicon {font-family: 'Glyphicons Halflings' !important;} /* For Glyphicons *

bootstrap字体图标不显示的问题解决

1.bootstrap字体图标无论何时都不显示 v2.x版本要求引入glyphicons-halflings-white.png   glyphicons-halflings.png这两个图片:具体操作参照:http://www.jb51.net/article/94186.htm v3.x版本要求引入front字体图标文件,在bootstrap下引入fronts文件夹:参考:http://www.cnblogs.com/xiaoshujiang/p/5529502.html 2.bootstr

360 浏览器 不显示 bootstrap 字体图标问题

最新在开发项目,需要引用字体图标 glyphicon ,在调试的过程中,google ,firefox 正常显示,360 ,ie 等 ,不显示. 排除了 1. 服务器 web mime 类型 2.项目中 css 路径问题 最终 在网上找的了一个方法:chrome://flags/   不显示字体图标问题.试着在360 浏览器中输入 次 命令,停用DirectWrite Windows 停用实验版DirectWrite字体渲染系 在次打开360 浏览器 glyphicon  字体图标正常显示

在web.config文件中,增加“type="APP.Modules.CommandModule,CommandModules"”节点会导致awesome font字体图标显示为方框框

在配置文件中,增加以下节点,会造成awesome font字体图标不显示 <system.webServer> <modules> <add type="APP.Modules.CommandModule,CommandModules" name="CommandModule" /> </modules> </system.webServer> 解决办法:将上述节点去掉,即可.

Bootstrap 字体图标引用示例

Bootstrap 字体图标引用示例: <span class="glyphicon glyphicon-wrench"></span>,glyphicon-wrench是一个扳手的图标.  言小鱼遇到引用引用Bootstrap Glyphicons字体图标不显示的问题.找了半天也不知道是哪里出错了,引用css正常,在本地也可以正常显示,span换个类名也不显示,只有类名为glyphicon-pencil的可以显示,但是与预期的图标还不一样,好坑爹啊! 原以为跟

Bootstrap的布局组件——字体图标

1.Bootstrap的字体图标 字体图标是web项目中使用的图标字体. 点击这里可以查看字体图标列表. [email protected]的意义和使用(如何引用这些字体图标) @font-face使得设计师可以把自定义的字体显示在网页上,而不用担心用户的主机上没有这个字体而无法显示. 通过@font-face方法,可以把自定义的字体从服务器或者字体来源处下载到用户主机上. 以下代码来自于:点击这里 1 @font-face { 2 font-family: DeliciousRoman; 3

移动端字体图标Bug

用16进制编码的字体图标在部分小米机型显示不正常. 测试机型:小米1,小米1s,小米2浏览器:微信6.1内置浏览器,QQ浏览器 5.7 X5内核字体图标:不显示svg图标:显示正常 内置浏览器,uc浏览器,正常显示 如 Glyphicons 官网的字体图标就显示不正常,svg图标显示正常. Glyphicons 官网:http://glyphicons.com/ 国内阿里Iconfont:http://www.iconfont.cn/    官网采用SVG绘制正常显示,下载回来的demo显示不正

vue项目打包部署elementUI的字体图标丢失问题

自己搭建的Vue项目,没有使用vue-cli,引入elementUI时,使用的是webpack直接打包工具,发现字体图标丢失你 记录一下解决办法: webpack module配置:(build目录下webpack.base.conf.js文件) { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('fonts/[name].

IE8不显示字体图标

bootstrap流行,随着自带的字体图标也火起来了.漂亮的字体系统中没有,制作成字体文件,下载到本地,浏览漂亮的网页哦. 在项目中遇到有些IE8显示不了,原因是IE8下设置了禁止字体下载 版权声明:本文为博主原创文章,未经博主允许不得转载.