Css-loader: Errors loading ionicons.css

Created on 9 Sep 2014 · 10Comments · Source: webpack-contrib/css-loader

ERROR in ./ionicons-1.5.2/fonts/ionicons.eot?v=1.5.2
Module parse failed: /*/ionicons-1.5.2/fonts/ionicons.eot?v=1.5.2 Line 1: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
@ ./~/css-loader!./ionicons-1.5.2/css/ionicons.css 2:300-340 2:356-396

ERROR in ./ionicons-1.5.2/fonts/ionicons.woff?v=1.5.2
Module parse failed: /*/ionicons-1.5.2/fonts/ionicons.woff?v=1.5.2 Line 1: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
@ ./~/css-loader!./ionicons-1.5.2/css/ionicons.css 2:515-556

etc...

Source

speigg

Most helpful comment

this works for me:

{ test: /\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/, loader: "file-loader" },

this is good for font-awesome

gaokun on 2 Aug 2016

👍36 🎉9 😄7 😕5 ❤4 🚀1

All 10 comments

You ~~may~~ need an appropriate loader to handle this file type.

module: {
  loaders: [
    { test: /\.(eot|woff)$/, loader: "file-loader" }
  ]
}

sokra on 9 Sep 2014

😄14 👍12

Oh interesting. Okay. I assumed the css loader alone would pull all of it's dependencies. I'll try that.

speigg on 9 Sep 2014

for the "?v=xxx" suffix, you'd need to use this regular expression:
{ test: /.ttf([\?]?.*)$/, loader: "file-loader" }

ruanwz on 14 Sep 2014

👎5

The following loaders worked for me

{ test: /\.woff$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
{ test: /\.ttf$/,  loader: "url-loader?limit=10000&mimetype=application/octet-stream" },
{ test: /\.eot$/,  loader: "file-loader" },
{ test: /\.svg$/,  loader: "url-loader?limit=10000&mimetype=image/svg+xml" }

ghost on 7 Jan 2015

👍10

Following worked for me

{
    test   : /\.woff/,
    loader : 'url?prefix=font/&limit=10000&mimetype=application/font-woff'
}, {
    test   : /\.ttf/,
    loader : 'file?prefix=font/'
}, {
    test   : /\.eot/,
    loader : 'file?prefix=font/'
}, {
    test   : /\.svg/,
    loader : 'file?prefix=font/'
}

timuric on 31 Aug 2015

👍10 😄8

this works for me:

{
       test   : /\.woff|\.woff2|\.svg|.eot|\.ttf/,
       loader : 'url?prefix=font/&limit=10000'
}

jacobhamblin on 17 Sep 2015

😄15 👍6

this works for me:

{ test: /\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/, loader: "file-loader" },

this is good for font-awesome

gaokun on 2 Aug 2016

👍36 🎉9 😄7 😕5 ❤4 🚀1

{
test: /.woff|.woff2|.svg|.eot|.ttf/,
use: 'url-loader?prefix=font/&limit=10000'
}

for webpack2

showd0wn on 25 Mar 2017

👍4 😄1

Wow! An answer that actually works! Thank you very much sokra.

darincardin on 6 Jun 2017

hi，this is the error i meet,someone can help me?

WARNING in ./src/assets/logo.png
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
@ ./src ^.\/(?!main(.js)?$)
@ ./test/unit/index.js
27 11 2017 08:56:29.940:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
27 11 2017 08:56:29.943:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
27 11 2017 08:56:29.950:INFO [launcher]: Starting browser PhantomJS
27 11 2017 08:56:33.035:INFO [PhantomJS 2.1.1 (Windows 8 0.0.0)]: Connected on socket l4a2fk1nyYQTqU1MAAAA with id 49733607
PhantomJS 2.1.1 (Windows 8 0.0.0) ERROR
SyntaxError: Unexpected token ')'
at test/unit/index.js:826