Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
webpack + font-awesome test
require('font-awesome/css/font-awesome.css');
document.body.innerHTML = '<i class="fa fa-fw fa-question"></i>';
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<title>Webpack Test</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
{
"name": "webpack-font-awesome-test",
"version": "1.0.0",
"author": "Tobias Bieniek <tobias.bieniek@qsc.de>",
"scripts": {
"dev": "webpack -d",
"dist": "webpack -p"
},
"dependencies": {
"font-awesome": "^4.3.0"
},
"devDependencies": {
"css-loader": "^0.9.1",
"file-loader": "^0.8.1",
"style-loader": "^0.8.3",
"url-loader": "^0.5.5",
"webpack": "^1.5.3"
}
}
var config = {
entry: './app.js',
output: {
filename: 'bundle.js'
},
module: {
loaders: [{
test: /\.css$/,
loader: 'style!css?sourceMap'
}, {
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/font-woff"
}, {
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/font-woff"
}, {
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/octet-stream"
}, {
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: "file"
}, {
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=image/svg+xml"
}]
}
};
module.exports = config;
@kiki-le-singe

This comment has been minimized.

Copy link

@kiki-le-singe kiki-le-singe commented Aug 24, 2015

Thanks it works!

@EcutDavid

This comment has been minimized.

Copy link

@EcutDavid EcutDavid commented Sep 16, 2015

Thanks

@jbcpollak

This comment has been minimized.

Copy link

@jbcpollak jbcpollak commented Oct 20, 2015

Works great thanks!

@arifulhb

This comment has been minimized.

Copy link

@arifulhb arifulhb commented Oct 24, 2015

Working in Safari only! FF & Chrome failed! :(

@vnctaing

This comment has been minimized.

Copy link

@vnctaing vnctaing commented Nov 28, 2015

I first forgot to install in devDepencies file-loader and url-loader. It works now, good job ๐Ÿ‘ !

@joaogarin

This comment has been minimized.

Copy link

@joaogarin joaogarin commented Nov 29, 2015

Any idea why this only works on safari?

@benoror

This comment has been minimized.

@charliehavak

This comment has been minimized.

Copy link

@charliehavak charliehavak commented Dec 13, 2015

Hi I get error when installing "npm install font-awasome --save-dev" what i did wrong?
How do I install the package? tnx.

@whmountains

This comment has been minimized.

Copy link

@whmountains whmountains commented Dec 18, 2015

Worked great for me on latest chrome. Thanks!

@vedovelli

This comment has been minimized.

Copy link

@vedovelli vedovelli commented Jan 29, 2016

Thanks! =D

@jancel

This comment has been minimized.

Copy link

@jancel jancel commented Feb 11, 2016

Great! Latest versions still work....

@hollychen503

This comment has been minimized.

Copy link

@hollychen503 hollychen503 commented Mar 8, 2016

great! thank a lots!

@filipalacerda

This comment has been minimized.

Copy link

@filipalacerda filipalacerda commented Mar 17, 2016

Thanks ๐Ÿ‘

@yujiahuang

This comment has been minimized.

Copy link

@yujiahuang yujiahuang commented Mar 22, 2016

Thank you so much!

@FPierre

This comment has been minimized.

Copy link

@FPierre FPierre commented Mar 23, 2016

Working in Chrome 49. Thanks !

@sb8244

This comment has been minimized.

Copy link

@sb8244 sb8244 commented Mar 29, 2016

This is great. Love including snippets rather than entire modules for things like this!

@ufukomer

This comment has been minimized.

Copy link

@ufukomer ufukomer commented Apr 27, 2016

Thank you! It works. :)

@tacomanator

This comment has been minimized.

Copy link

@tacomanator tacomanator commented May 5, 2016

๐Ÿ‘๐Ÿ‘๐Ÿ‘

@ghost

This comment has been minimized.

Copy link

@ghost ghost commented Jun 3, 2016

Amazing. Thanks. ๐Ÿ‘

@renarsvilnis

This comment has been minimized.

Copy link

@renarsvilnis renarsvilnis commented Jun 15, 2016

Is there any particular reason you are using url-loaderinstead of file-loader for fonts?
For me it seems unnecessary, as each browser needs a different format and why leave an option for a font file to be url-loaded as browser x might not even need it.

@sirgallifrey

This comment has been minimized.

Copy link

@sirgallifrey sirgallifrey commented Jun 29, 2016

awesome!

@ivapie

This comment has been minimized.

Copy link

@ivapie ivapie commented Jul 4, 2016

Thank you!

@abdennour

This comment has been minimized.

Copy link

@abdennour abdennour commented Sep 1, 2016

Great!

@leihuagh

This comment has been minimized.

Copy link

@leihuagh leihuagh commented Sep 29, 2016

Thank you so much.

@thangchung

This comment has been minimized.

Copy link

@thangchung thangchung commented Oct 6, 2016

๐Ÿ‘ It still really works after 2 years. Thanks a lot!

@vcollado

This comment has been minimized.

Copy link

@vcollado vcollado commented Nov 4, 2016

Thank you, still working ๐Ÿ‘

@Alex-xd

This comment has been minimized.

Copy link

@Alex-xd Alex-xd commented Nov 18, 2016

really thanks! help a lot!

@davidbarredo

This comment has been minimized.

Copy link

@davidbarredo davidbarredo commented Nov 21, 2016

Thanks!

@paradite

This comment has been minimized.

Copy link

@paradite paradite commented Nov 22, 2016

If you are using webpack 2 instead of webpack 1, you should use url-loader and file-loader instead of the usual url and file shorthand in the webpack config.

The reason for the change is webpack 2โ€™s new requirements for loaders: webpack-contrib/url-loader#55

I also wrote a post on how to set up font-awesome with Angular 2: https://paradite.com/2016/10/25/font-awesome-angular-2-webpack/

@nadavten

This comment has been minimized.

Copy link

@nadavten nadavten commented Nov 28, 2016

AWESOME !!!

@rameshsyn

This comment has been minimized.

Copy link

@rameshsyn rameshsyn commented Nov 30, 2016

thanks

@beiweiqiang

This comment has been minimized.

Copy link

@beiweiqiang beiweiqiang commented Dec 11, 2016

Thanks!! ๐Ÿ˜„

@niksajanjic

This comment has been minimized.

Copy link

@niksajanjic niksajanjic commented Dec 14, 2016

url-loader will add mime types by default if not provided, so instead of having 5 different tests for all files I did it in a way to have 1 loader for all files:

{
  test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
  loader: 'url?limit=10000',
}

Mime types are calculated automatically and current version of url-loader calculates these mime types:

  • fontawesome-webfont.eot -> application/vnd.ms-fontobject
  • fontawesome-webfont.woff2 -> application/octet-stream
  • fontawesome-webfont.woff -> application/font-woff
  • fontawesome-webfont.ttf -> application/x-font-ttf
  • fontawesome-webfont.svg -> image/svg+xml

If any of these mime types doesn't suit your needs don't use this approach.

@Darmikon

This comment has been minimized.

Copy link

@Darmikon Darmikon commented Dec 22, 2016

niksajanjic, thanks your regular expression saved the day

@klihelp

This comment has been minimized.

Copy link

@klihelp klihelp commented Jan 22, 2017

svg dosn't load

Module parse failed: /../assets/font/PP-Regular.svg Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
@unclejustin

This comment has been minimized.

Copy link

@unclejustin unclejustin commented Mar 2, 2017

I couldn't get this working as is either. But I figured it out with Webpack 2 using extract-text-webpack-plugin

https://github.com/unclejustin/webpack-font-awesome-simple

@adriancmiranda

This comment has been minimized.

Copy link

@adriancmiranda adriancmiranda commented Mar 8, 2017

@unclejustin try to use this approach:

$fa-font-path: "~font-awesome/fonts";
@import "~font-awesome/scss/font-awesome.scss";
@riguelbf

This comment has been minimized.

Copy link

@riguelbf riguelbf commented Mar 15, 2017

great!! thanks!!!!

@Pawelh133

This comment has been minimized.

Copy link

@Pawelh133 Pawelh133 commented Mar 29, 2017

thank you

@sandor11

This comment has been minimized.

Copy link

@sandor11 sandor11 commented Jun 16, 2017

This was really helpful. If you are using css modules and this is not working, then have a look at

https://gist.github.com/sandor11/0319e27d0ef43637ff399ec303fa116f

@jaimefps

This comment has been minimized.

Copy link

@jaimefps jaimefps commented Oct 5, 2017

I manage to run webpack while requiring the font-awesome css file (now you also need to add "-loader" to loader names in the webpack.config); but I get 404 on the icons, which just show up as sad little squares where invoked in the html.

@b4dnewz

This comment has been minimized.

Copy link

@b4dnewz b4dnewz commented Nov 12, 2017

@jaimefps same as you, did you solved?

@Hasan-git

This comment has been minimized.

Copy link

@Hasan-git Hasan-git commented Apr 14, 2018

works, thank you

@jonasespelita

This comment has been minimized.

Copy link

@jonasespelita jonasespelita commented Apr 27, 2018

I prefer the official way to do it as detailed in the fontawesome docs

@sureshvv

This comment has been minimized.

Copy link

@sureshvv sureshvv commented May 31, 2018

This works. font-awesome-webpack did not

Do I have to deploy the .woff, .eot, .woff2, .svg files along with the bundle.js?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You canโ€™t perform that action at this time.