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 commented Aug 24, 2015

Thanks it works!

@EcutDavid

This comment has been minimized.

Copy link

EcutDavid commented Sep 16, 2015

Thanks

@jbcpollak

This comment has been minimized.

Copy link

jbcpollak commented Oct 20, 2015

Works great thanks!

@arifulhb

This comment has been minimized.

Copy link

arifulhb commented Oct 24, 2015

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

@vnctaing

This comment has been minimized.

Copy link

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 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 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 commented Dec 18, 2015

Worked great for me on latest chrome. Thanks!

@vedovelli

This comment has been minimized.

Copy link

vedovelli commented Jan 29, 2016

Thanks! =D

@jancel

This comment has been minimized.

Copy link

jancel commented Feb 11, 2016

Great! Latest versions still work....

@hollychen503

This comment has been minimized.

Copy link

hollychen503 commented Mar 8, 2016

great! thank a lots!

@filipalacerda

This comment has been minimized.

Copy link

filipalacerda commented Mar 17, 2016

Thanks ๐Ÿ‘

@yujiahuang

This comment has been minimized.

Copy link

yujiahuang commented Mar 22, 2016

Thank you so much!

@FPierre

This comment has been minimized.

Copy link

FPierre commented Mar 23, 2016

Working in Chrome 49. Thanks !

@sb8244

This comment has been minimized.

Copy link

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 commented Apr 27, 2016

Thank you! It works. :)

@tacomanator

This comment has been minimized.

Copy link

tacomanator commented May 5, 2016

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

@ghost

This comment has been minimized.

Copy link

ghost commented Jun 3, 2016

Amazing. Thanks. ๐Ÿ‘

@renarsvilnis

This comment has been minimized.

Copy link

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 commented Jun 29, 2016

awesome!

@ivapie

This comment has been minimized.

Copy link

ivapie commented Jul 4, 2016

Thank you!

@abdennour

This comment has been minimized.

Copy link

abdennour commented Sep 1, 2016

Great!

@leihuagh

This comment has been minimized.

Copy link

leihuagh commented Sep 29, 2016

Thank you so much.

@thangchung

This comment has been minimized.

Copy link

thangchung commented Oct 6, 2016

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

@vcollado

This comment has been minimized.

Copy link

vcollado commented Nov 4, 2016

Thank you, still working ๐Ÿ‘

@Alex-xd

This comment has been minimized.

Copy link

Alex-xd commented Nov 18, 2016

really thanks! help a lot!

@davidbarredo

This comment has been minimized.

Copy link

davidbarredo commented Nov 21, 2016

Thanks!

@paradite

This comment has been minimized.

Copy link

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 commented Nov 28, 2016

AWESOME !!!

@rameshsyn

This comment has been minimized.

Copy link

rameshsyn commented Nov 30, 2016

thanks

@beiweiqiang

This comment has been minimized.

Copy link

beiweiqiang commented Dec 11, 2016

Thanks!! ๐Ÿ˜„

@niksajanjic

This comment has been minimized.

Copy link

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 commented Dec 22, 2016

niksajanjic, thanks your regular expression saved the day

@klihelp

This comment has been minimized.

Copy link

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 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 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 commented Mar 15, 2017

great!! thanks!!!!

@Pawelh133

This comment has been minimized.

Copy link

Pawelh133 commented Mar 29, 2017

thank you

@sandor11

This comment has been minimized.

Copy link

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 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 commented Nov 12, 2017

@jaimefps same as you, did you solved?

@Hasan-git

This comment has been minimized.

Copy link

Hasan-git commented Apr 14, 2018

works, thank you

@jonasespelita

This comment has been minimized.

Copy link

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 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.