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. 像Bootstrap一样比较热门的前端框架有哪些

    像Bootstrap一样比较热门的前端框架有哪些 一.总结 一句话总结:框架大同小异,可以多去各自官网看看效果(比较一下各自的不同点(也就是提供的不同的功能)),然后根据需求选择用哪个.我觉得boot ...

  2. POJ 2402 Palindrome Numbers（LA 2889） 回文数

    POJ:http://poj.org/problem?id=2402 LA:https://icpcarchive.ecs.baylor.edu/index.php?option=com_online ...

  3. Socket编程模型之完毕port模型

    转载请注明来源:viewmode=contents">http://blog.csdn.net/caoshiying?viewmode=contents 一.回想重叠IO模型 用完毕例 ...

  4. ztree实现左边动态生成树，右边为具体信息功能

    页面原型图: 图片.png 功能需求:点击左边树上的子节点,像后台发送请求,将请求到的信息展示在右边的表单里面 前端代码实现: 引入css文档: <link rel="styleshe ...

  5. Loader之二：CursorLoader基本实例 分类： H1_ANDROID 2013-11-16 10:50 5447人阅读 评论(0) 收藏

    参考APIDEMO:sdk\samples\android-19\content\LoaderCursor 1.创建主布局文件,里面只包含一个Fragment. <FrameLayout xml ...

  6. cocos2d-x win8下的环境配置和建立项目

    cocos2dx 跨平台.可是看网上说开发最合适还是在vs2010中,基本是编完后再移植到安卓. 1.去官网下载源代码2.2.3版本号的. 2.然后运行根文件夹下的build-win32.bat(须要 ...

  7. Android 比较两个时间段是否有交集或重复

    先看一个例图: 在金山<电池管家>应用中就有一个类似上图这样的功能—— 开启多个定时任务. 当开启另一个定时任务的时候,如果即将开启的这个定时任务的时间段与已经开启了的定时任务的时间段有交 ...

  8. php正则及常用正则函数怎么用

    php正则及常用正则函数怎么用 一.总结 一句话总结: 能够使用正则的函数:preg_match();preg_match_all();preg_replace();preg_grep();preg_ ...

  9. 小强的HTML5移动开发之路（39）——jqMobi插件json格式ActionSheet

    在上一篇中我们学会了ActionSheet的使用,细心的朋友可能会发现其中创建列表的格式是HTML的,代码如下: function showCustomHtmlSheet() { $("#a ...

  10. 社会化登录分享-Android SDK的二次封装和使用

    本系列文章将第三方的登录分享功能进行二次封装,统一接口调用,简化了接不同平台登录分享的步骤. 0 系列文章 系列一 Android SDK的二次封装和使用 系列二 源码解析 系列三 微信SDK接入 系 ...