-
-
Save Turbo87/e8e941e68308d3b40ef6 to your computer and use it in GitHub Desktop.
| 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; |
Thank you! It works. :)
👍👍👍
Amazing. Thanks. 👍
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.
awesome!
Thank you!
Great!
Thank you so much.
👍 It still really works after 2 years. Thanks a lot!
Thank you, still working 👍
really thanks! help a lot!
Thanks!
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/
AWESOME !!!
thanks
Thanks!! 😄
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.
niksajanjic, thanks your regular expression saved the day
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.
I couldn't get this working as is either. But I figured it out with Webpack 2 using extract-text-webpack-plugin
@unclejustin try to use this approach:
$fa-font-path: "~font-awesome/fonts";
@import "~font-awesome/scss/font-awesome.scss";
great!! thanks!!!!
thank you
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
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.
@jaimefps same as you, did you solved?
works, thank you
I prefer the official way to do it as detailed in the fontawesome docs
This works. font-awesome-webpack did not
Do I have to deploy the .woff, .eot, .woff2, .svg files along with the bundle.js?
This is great. Love including snippets rather than entire modules for things like this!