1、安装font-awesome和font-awesome-loader及依赖

git:https://github.com/shakacode/font-awesome-loader

npm install font-awesome-loader less less-loader css-loader style-loader file-loader font-awesome -save

2、配置webpack

官方给出的webpack2.0配置如下:

但是实际上会出现如下错误:

解决办法:

3、使用(pug)

i(class='fa fa-comments' slot="icon" ) 

webpack之font-awesome的更多相关文章

  1. 使用 webpack 打包 font 字体的问题

    之前在使用 Vue 做项目的时候使用了 font 字体,然而在打包的时候 font 字体的引用路径不正确. 解决办法就是在 webpack 的配置文件中设置根路径 目录在 \config\index. ...

  2. webpack 使用优化指南

    前言 本文不是webpack入门文章,如果对webpack还不了解,请前往题叶的Webpack入门,或者阮老师的Webpack-Demos. 为什么要使用Webpack 与react一类模块化开发的框 ...

  3. webpack构建vue项目(配置篇)

    最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出 ...

  4. webpack使用优化(基本篇)

    转自:https://github.com/lcxfs1991/blog/issues/2 前言 本文不是webpack入门文章,如果对webpack还不了解,请前往题叶的Webpack入门,或者阮老 ...

  5. [转]WebPack 常用功能介绍

    概述 Webpack是一款用户打包前端模块的工具.主要是用来打包在浏览器端使用的javascript的.同时也能转换.捆绑.打包其他的静态资源,包括css.image.font file.templa ...

  6. WebPack常用功能介绍

    概述 Webpack是一款用户打包前端模块的工具.主要是用来打包在浏览器端使用的javascript的.同时也能转换.捆绑.打包其他的静态资源,包括css.image.font file.templa ...

  7. webpack 的简单使用

    p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px "Helvetica Neue"; color: #323333 } p. ...

  8. 使用webpack打包ThinkPHP的资源文件

    使用webpack打包ThinkPHP的资源文件 利用自己的空余时间一直在维护http://www.wx2share.com这个小网站,全是一个人在弄,由于只租得起虚拟空间,所以后台采用了简单方便的T ...

  9. vue-cli + webpack 多页面实例应用

    关于vue.js vue.js是一套构建用户界面的 轻型的渐进式前端框架.它的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.使用vue可以给你的开发带来极致的编程体验. 关于vu ...

  10. vue-cli + webpack

    vue-cli + webpack 关于vue.js vue.js是一套构建用户界面的 轻型的渐进式前端框架.它的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.使用vue可以给你 ...

随机推荐

  1. php中嵌套html代码和html代码中嵌套php方式

    php中嵌套html代码和html代码中嵌套php方式 一.总结 拷贝的话直接html代码是极好的方式 1.php中嵌套html代码(本质是原生php):a.原生嵌套<?php .....?&g ...

  2. [PReact] Use Link State to Automatically Handle State Changes

    Storing and updating values inside a component’s local state (known as controlled components) is suc ...

  3. stl变易算法(一)

    C++ STL的变易算法是一组可以改动容器元素数据的模板函数,可进行序列容器的复制.交换.替换.填充.移除.旋转等.这些算法对迭代器有较高的要求.详细的迭代器类型随各个算法而定,或向前迭代器.或双向迭 ...

  4. IOS开发核心动画六:动画组

    #import "ViewController.h" @interface ViewController () @property (weak, nonatomic) IBOutl ...

  5. apche commons项目简介 分类: B1_JAVA 2014-06-26 11:27 487人阅读 评论(0) 收藏

    1.apche commons项目封装了日常开发中经常使用的功能,如io, String等. http://commons.apache.org/ Apache Commons项目的由三部分组成: T ...

  6. 【Lucene4.8教程之三】搜索 2014-06-21 09:53 1532人阅读 评论(0) 收藏

    1.关键类 Lucene的搜索过程中涉及的主要类有以下几个: (1)IndexSearcher:执行search()方法的类 (2)IndexReader:对索引文件进行读操作,并为IndexSear ...

  7. 【Heritrix基础教程之3】Heritrix的基本架构 分类: H3_NUTCH 2014-06-01 16:56 1267人阅读 评论(0) 收藏

    Heritrix可分为四大模块: 1.控制器CrawlController 2.待处理的uri列表  Frontier 3.线程池 ToeThread 4.各个步骤的处理器 (1)Pre-fetch ...

  8. [内核编程] visual studio 2010配置驱动开发环境

    visual studio 2010 配置驱动开发环境 ** 工具/材料 VS2010.WDK开发包 **  配置过程 以下将讲述VS2010驱动开发环境的配置过程,至于必要软件的安装过程这里不再赘述 ...

  9. 【C++竞赛 D】树的深度

    时间限制:1s 内存限制:32MB 问题描述 数据结构中定义,树的高度为一棵树中所有节点的层次的最大值.现在yyy有一棵树请你帮他求出该树的高度. 输入描述 第一行一个整数T(1≤T≤20)表示数据组 ...

  10. 【32.89%】【codeforces 719A】Vitya in the Countryside

    time limit per test 1 second memory limit per test 256 megabytes input standard input output standar ...