webpack中使用iconfont字体图标的方法

 更新时间:2018年02月22日 10:31:43   作者:TowYingWang   我要评论
下面小编就为大家分享一篇webpack中使用iconfont字体图标的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

入坑webpack,开始加载一些图片、js文件什么的都没有报错,今天正好下了iconfont字体,就出现了错误,所以这里分享一下怎么在webpack中使用iconfont。

1、修改css中字体文件路径

我把css和字体文件放在同级目录下

打开iconfont.css文件,原本的字体文件引用路径是用的css的方式,即下面图片中所示的

同级目录:直接用文件名

上一级目录:../

但是,我们是在webpack环境下使用,所以要改成webpack引用规则,即改成下面图片所示

同级目录: ./

上一级目录: ../

2、配置如何加载woff等字体文件

大家都知道webpack要配置loader,声明如何加载某类文件,所以我们要在config中声明一下

使用之前要安装url-loader、file-loader

在webpack的配置文件的loaders中配置

字体文件最后会以字符的形式保存在css文件中

以上这篇webpack中使用iconfont字体图标的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • js面向对象的写法

    js面向对象的写法

    这篇文章主要介绍了四种js面向对象的常见写法,还介绍了有关this的相关内容,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • React通过父组件传递类名给子组件的实现方法

    React通过父组件传递类名给子组件的实现方法

    React 是一个用于构建用户界面的 JAVASCRIPT 库。这篇文章主要介绍了React通过父组件传递类名给子组件的方法,需要的朋友可以参考下
    2017-11-11
  • js中设置元素class的三种方法小结

    js中设置元素class的三种方法小结

    列举所有的方式,看看各浏览器的支持差异。方便用js动态设置元素css的代码。需要的朋友可以参考下。
    2011-08-08
  • 用js实现放大镜的效果的简单实例

    用js实现放大镜的效果的简单实例

    下面小编就为大家带来一篇用js实现放大镜的效果的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • js中let能否完全替代IIFE

    js中let能否完全替代IIFE

    这篇文章主要介绍了js中let能否完全替代IIFE,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,,需要的朋友可以参考下
    2019-06-06
  • JavaScript两种计时器的实例讲解

    JavaScript两种计时器的实例讲解

    今天小编就为大家分享一篇关于JavaScript两种计时器的实例讲解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • js+div实现文字滚动和图片切换效果代码

    js+div实现文字滚动和图片切换效果代码

    这篇文章主要介绍了js+div实现文字滚动和图片切换效果代码,涉及javascript鼠标事件及页面元素图片滚动效果实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • 微信小程序局部刷新触发整页刷新效果的实现代码

    微信小程序局部刷新触发整页刷新效果的实现代码

    这篇文章主要介绍了微信小程序局部刷新触发整页刷新效果的实现代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-11-11
  • javascript下4个跨浏览器必备的函数

    javascript下4个跨浏览器必备的函数

    如果你的项目要用到 JavaScript,而你不使用任何 JavaScript 框架,那么对于那些常用且各个浏览器明显不同的地方就需要用函数来封装起来。
    2010-03-03
  • js图片延迟加载的实现方法及思路

    js图片延迟加载的实现方法及思路

    这里延迟加载的意思是,拖动滚动条时,在图片出现在浏览器显示区域后才加载显示。
    2013-07-07

最新评论