404 Not Found
The requested URL /q/0024 was not found on this server.react-webpack工程中怎么使用iconFont图标_百度知道
react-webpack工程中怎么使用iconFont图标
我有更好的答案
reactjs就是适合移动端的 React 通常和其他的 JavaScript 框架同时被提及，但是说“React 对比 Angular”却讲不通，因为它们之间是不可比较的。Angular 是一个完整的框架（包括一个 view 层），React 却并不是。这也是 React 很难于理解的原因，它...
采纳率：92%
来自团队：
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。react-webpack工程中怎么使用iconFont图标？ - 知乎4被浏览<strong class="NumberBoard-itemValue" title="分享邀请回答0添加评论分享收藏感谢收起webpack配置导致字体图标无法显示的解决方法
问题：在项目开发时使用字体图标，报错如下：
所有的字体图标都不能正常显示了，报错提示不能解码字体。
解决问题：找了很久，最后发现是在webpack配置的时候自己手动添加了下面的代码而引起的错误：在 webpack.base.conf.js文件中删除
test: /\.(eot|svg|ttf|woff|woff2)(\&#063;\S*)&#063;$/,
loader: 'file-loader'
其实采用vue-cli 自动生成的配置文件已经完成了字体图标文件的编译，自己写的和自动生成的产生冲突
以上这篇webpack配置导致字体图标无法显示的解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
您可能感兴趣的文章:
webpack中使用iconfont字体图标的方法
入坑webpack,开始加载一些图片.js文件什么的都没有报错,今天正好下了iconfont字体,就出现了错误,所以这里分享一下怎么在webpack中使用iconfont. 1.修改css中字体文件路径 我把css和字体文件放在同级目录下 打开iconfont.css文件,原本的字体文件引用路径是用的css的方式,即下面图片中所示的 同级目录:直接用文件名 上一级目录:../ 但是,我们是在webpack环境下使用,所以要改成webpack引用规则,即改成下面图片所示 同级目录: ./ 上一级目
字体图标 字体图标是指将图标做成字体文件(.ttf),从而代替传统的png等图标资源. 使用字体图标的优点和缺点分别为: 优点: 1. 可以高度自定义图标的样式(包括大小和颜色),对于个人开发者尤其适用 2. 可以减少项目和安装包的大小(特别你的项目中有很多图片icon时,效果将是M级) 3. 几乎可以忽略屏幕大小和分辨率,做到更好的适配 4. 使用简单 -- 缺点:
1. 只能是一些简单的icon,不能代替如背景图.9图等资源 2. 一些需要文字说明的icon,图片资源将会是更好
相关阅读: 详解Bootstrap glyphicons字体图标 先给大家说下什么是字体图标? 字体图标是在 Web 项目中使用的图标字体.虽然,Glyphicons Halflings 需要商业许可,但是您可以通过基于项目的 Bootstrap 来免费使用这些图标. 为了表示对图标作者的感谢,希望您在使用时加上 GLYPHICONS 网站的链接. 使用bootstrap很久了,内置的 glyphicons 图标,足以满足 小型项目的需求.只需要使用一个样式,即可调出图标.虽然感觉很神奇,一直没
1.Android系统默认支持三种字体,分别为:&sans&, &serif&, &monospace 2.在Android中可以引入其他字体 . 复制代码 代码如下: &?xml version=&1.0& encoding=&utf-8&?&&TableLayout xmlns:Android=&http://schemas.android.com/apk/res/android&qu
今天查看网站的源代码,发现有个glyphicons-halflings-regular.woff文件没有找到,因为我的网站使用了bootstrap的Glyphicons 字体图标,因此需要加载Glyphicons Halflings的相关文件,但是我的文件中明明有这个文件那怎么会报404错误呢? 查看了下博客上查到了解决方案 跟大家分享一下 在web.config 中添加如下代码段 &system.webServer& &staticContent& &remove file
本文实例讲述了Android编程中TextView字体属性设置方法(大小.字体.下划线.背景色).分享给大家供大家参考,具体如下: import android.content.C import android.graphics.C import android.text.SpannableS import android.text.S import android.text.style.AbsoluteSizeS import andr
你在使用bootstrap字体图标的时候,是否遇到引用本地Bootstrap文件无法显示字体图标,而使用CDN服务器上bootstrap却能正常显示的问题. 在不能正常显示的时候,比如我要在一个按钮中使用一个√的字体图标,我的代码是这样子的: &!doctype html& &html lang=&en&& &head& &meta charset=&UTF-8&& &title&bootstrap字体图标
jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染 解决办法: 使用解析器 Parser(解析器) $.parser.parse(); // 解析所有页面 $.parser.parse('#cc'); // 解析指定节点 以上这篇easyui datagrid 表格中操作栏 按钮图标不显示的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
bootstratp作为一个优秀的前端框架,最近使用了其中的Glyphicon Halflings的字体图标.起初一直显示不出来,后面通过搜索相关资料直到成功显示,在此做一些总结,方便后面复习. 1.在html页面引入bootstrap &!DOCTYPE html& &html& &head& &meta charset=&UTF-8&& &title&xxxx&/title& &link href=&qu
本章将讲解字体图标(Glyphicons),并通过一些实例了解它的使用.Bootstrap 捆绑了 200 多种字体格式的字形.首先让我们先来理解一下什么是字体图标. 首先给大家介绍什么是字体图标: 字体图标是在 Web 项目中使用的图标字体.字体图标在下载的Bootstrap的fonts文件夹中. .glyphicon { position: top: 1 display: inline- font-family: 'Glyphicons Halfling
好多人都觉得在VC中实现文字竖排是一件很难的事情,其实可以使用&躺&着的字体很方便的实现文字竖排. Windows中有一些字体是&躺&着的,例如:@Fixedsys.@System.@宋体.@黑体等等,有很多,这些字体和不加@的字体的唯一区别就是用这些字体显示的文字是&躺&着的.如下图: 对这些&躺&着的字体进行270°的旋转就可以实现文字竖排了,效果如下: 以下代码可以产出竖排的宋体. CF CFont *附一张上周末参加jsconf的照片。。。。。
标题也不知道怎么写好，真是尴尬。不过话说回来，距离上一次写文快两个月了，最近有点忙，一直在开发新项目，
今天刚刚闲下来，项目准备提测。借这个功夫写点东西，把新项目上学到的一些好的干活分享一下，以便之后开发的
时候能烂熟于心。
本次分享两个干货，正文从这里开始：
1、很多同学在开发项目前端项目的时候会遇到一个比较影响开发体验的事情，就是在更新样式文件的时候，页面不会热更新。当然前提是在webpack配置项里用了
‘extract-text-webpack-plugin’这个分离css样式的插件。当我开启webpack的HotModuleReplacementPlugin 这个热更新插件的时候，修改js或jsx文件的时候，项目会热更新，但加了‘extract-text-webpack-plugin’这个插件的时候就不行了。请教了一个同事，他给出的答案是在写loader的时候加一个‘css-hot-loader’如下图
插件地址。
2、前面是开胃小菜，提高开发体验。那么接下来要分享的，估计很多前端同学经常会碰到的问题。字体图标问题。
很多人都知道阿里妈妈有个icon字体库叫，早些年我就知道了这个牛逼的玩意儿，但是一直没有能正确的使用它，
这次新项目真正的比较完美的用上了这个库。楼主废话真的是多。。。。
之前很多同学都会像这样使用图标字体：
即创建一个fonts文件夹，拿来放图表字体。然后在iconfont里面各种找好看的图标，然后更新进去。然后webpack里的配置就是这样
巴拉巴拉的写loader。。。。我觉得是有点烦的。
正确的打开方式是这样的：
首先进入iconfont首页
会有一个图标管理的选项，下拉菜单里有一个我的项目，进入我的项目。
新建一个自己的字体库项目，然后在iconfont的首页搜索自己喜欢的图标然后加入项目。如下图所示
加入购物车之后，添加至之前新建的项目里，然后你的项目就会是下面这个样子：
注意这里的红色箭头，后面会有用到的。
接下来就是把你这个新建的图标项目用到你的开发项目里去，来，我们看代码，（前提是你已经成功配置了antd这个阿里开源的组件库）
解释一下，首先在你的项目src（看个人项目结构而定）目录下新建一个static文件夹用来放置antd的主题配置文件，在theme.js里写好这样的配置项
标了红色箭头的是之前iconfont我的项目里的cdn路径，里面有你在iconfont里找的图标，可以在浏览器打开看看源码。
这样配置了之后，怎么拓展antd的Icon呢？？？答案在webpack的配置项里，代码如下：
首先获取这个theme配置项，然后通过less-loader这个插件来实现配置
antd的官方网站也有说明
当然antd的官方网站说的是修改主题，但是我们通过这种形式把字体库的样式也顺带加进去。
然后我们要怎么用呢？？？代码如下
首先在static文件夹下创建一个iocn.less文件，为你之前在iconfont里找的各种图标命名，前面统一加anticon，后面的自取。content在我的项目里相应的图标上有，可以自行查找，这里不再赘述。
然后在你的全局样式文件里引入icon.less这个文件,并且在根目录倒入这个全局样式文件。
接下来在相应的文件中就可以引用你拓展出来的icon图标，举个例子
大家会注意到，antd的Button组件的默认颜色和boder-radius都变了，这是因为在之前的theme.js配置项里，
我把主题字段primary的颜色改成了‘#5877fa’，所以大家在开发的时候想改变主题色或者是antd的其他样式，可以统一在这里修改，或者是在根结点页面引入的css
样式文件里做修改。
最后，有不对的地方，望同学们积极评论，反正我也不会理你，以上。
阅读(...) 评论()