Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Problem with font-awesome #53

Closed
paveleremin opened this issue Sep 4, 2015 · 20 comments
Closed

Problem with font-awesome #53

paveleremin opened this issue Sep 4, 2015 · 20 comments

Comments

@paveleremin
Copy link

@paveleremin paveleremin commented Sep 4, 2015

Here is the errors:

ERROR in ./~/font-awesome/fonts/fontawesome-webfont.woff2?v=4.4.0
Module parse failed: C:\OpenServer\domains\react-hot-boilerplate\node_modules\font-awesome\fonts\fontawesome-webfont.woff2?v=4.4.0 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!./~/less-loader!./src/_styles/styles.less 6:92564-92646

ERROR in ./~/font-awesome/fonts/fontawesome-webfont.woff?v=4.4.0
Module parse failed: C:\OpenServer\domains\react-hot-boilerplate\node_modules\font-awesome\fonts\fontawesome-webfont.woff?v=4.4.0 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!./~/less-loader!./src/_styles/styles.less 6:92677-92758

Here is my conf

var path = require('path');
var webpack = require('webpack');

module.exports = {
    devtool: 'eval',
    entry: [
        'webpack-dev-server/client?http://localhost:3000',
        'webpack/hot/only-dev-server',
        './src/index'
    ],
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: '/static/'
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ],
    module: {
        loaders: [{
            test: /\.js$/,
            loaders: ['react-hot', 'babel'],
            include: path.join(__dirname, 'src')
        }, {
            test: /\.less$/,
            loader: 'style!css!less'
        }, {
            test: /\.(jpe?g|gif|png|eot|svg|woff2|ttf)$/,
            loader: 'file'
        }]
    }
};

any suggestions? Maybe I need some preLoader?

@hoffin
Copy link

@hoffin hoffin commented Sep 5, 2015

The file-loader isn't matching the font url due to the passed arguments, ?v=4.4.0, at the end.

I use the following to catch the any passed arguments, notice the (?.*$|$) instead of a plain $

test: /\.(jpe|jpg|woff|woff2|eot|ttf|svg)(\?.*$|$)/,
@gwilakers
Copy link

@gwilakers gwilakers commented Oct 28, 2015

Did this end up getting resolved? I am also having this issue, even with using the solution @hoffin suggested. Here are my loaders:

    module: {
        loaders: [
            { test: /(\.js$)|(\.jsx$)/, exclude: /node_modules/, loader: 'babel-loader' },
            { test: /(\.jade$)/, exclude: /node_modules/, loader: 'jade-loader' },
            { test: /(\.css$)/, exclude: /node_modules/, loaders: ['style-loader', 'css-loader', 'postcss-loader'] },
            { test: /(\.styl$)/, exclude: /node_modules/, loaders: ['style-loader', 'css-loader', 'stylus-loader'] },
            { test: /\.(jpe|jpg|woff|woff2|eot|ttf|svg)(\?.*$|$)/, exclude: /node_modules/, loader: 'url-loader?importLoaders=1&limit=100000' },
            { test: /\.jsx$/, exclude: /node_modules/, loader: 'react-hot-loader' }
        ],
    }

And here is the error I am receiving:

ERROR in ./~/font-awesome/css/font-awesome.css
Module parse failed: /Users/Username/Documents/Project/sub-project/node_modules/font-awesome/css/font-awesome.css Line 7: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
| /* FONT PATH
|  * -------------------------- */
| @font-face {
|   font-family: 'FontAwesome';
|   src: url('../fonts/fontawesome-webfont.eot?v=4.4.0');
 @ ./client/app.js 83:0-60
@thomasgwatson
Copy link

@thomasgwatson thomasgwatson commented Nov 2, 2015

I found this issue in a search for a problem with the same webfont.

However I realised there was a prior error to the one listed above. I am also getting

Cannot find module "font-awesome/fonts//fontawesome-webfont.woff2?v=4.4.0"

Which looks like a path error, not necessarily a problem with the loader.

Thoughts?

@gwilakers
Copy link

@gwilakers gwilakers commented Nov 2, 2015

I don't believe that was the issue I was having, there are no path problems with mine. It ended up being the issue with me excluding node mondules.

@cchamberlain
Copy link

@cchamberlain cchamberlain commented Dec 15, 2015

I think I was getting this issue due to the url being too long as well as the regex being off.

This seems to have fixed it for me although I suspect the regex @hoffin posted would work too:

{ test: /\.(eot|woff|woff2|ttf|svg|png|jpe?g|gif)(\?\S*)?$/
, loader: 'url?limit=100000&name=[name].[ext]'
}
@phil-travelbytes
Copy link

@phil-travelbytes phil-travelbytes commented Jan 26, 2016

@cchamberlain - your regex worked for me. Thanks.

@ConAntonakos
Copy link

@ConAntonakos ConAntonakos commented Mar 17, 2016

@cchamberlain - You're awesome. Thank you for the regex.

I definitely did not understand how webpack parses it b/c it looks like you're using two capturing groups while I was attempting to do it with one capturing group...

@Coffee-Tea
Copy link

@Coffee-Tea Coffee-Tea commented Mar 23, 2016

@cchamberlain - Thanks! Great for me!

@fellz
Copy link

@fellz fellz commented Apr 30, 2016

Yep, this is the solution, thanks a lot ! ))

I use the following to catch the any passed arguments, notice the (?.*$|$) instead of a plain $

I was googling and tweaking config file about an hour before found this Issue )

@cchamberlain
Copy link

@cchamberlain cchamberlain commented Apr 30, 2016

@fellz Moving the $|$) end of line outside of the capture group like so /\.(eot|woff|woff2|ttf|svg|png|jpe?g|gif)(\?\S*)?$/ yields the same result with less redundancy.

@ghost
Copy link

@ghost ghost commented Sep 21, 2016

I encountered this issue
But according to answer
I has fixed this issue
Thanks

@GerryFudd
Copy link

@GerryFudd GerryFudd commented Jan 19, 2017

I also had a similar error when I had

{
  test: /\.jsx?$/,
  loader: 'babel-loader',
  include: [
    resolve(__dirname, './src/')
  ]
}

I resolved the issue by adding

resolve(__dirname, './node_modules/react-icons/fa/')

to the include array.

@Lemmy4555
Copy link

@Lemmy4555 Lemmy4555 commented Mar 24, 2017

I'm using webpack 2.2.1^ and i had to use this confguration:

    module: {
        rules: [
            ...
            { 
                test: /.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
                use: "url-loader?limit=100000"
            }
        ]
    },
@alexsasharegan
Copy link

@alexsasharegan alexsasharegan commented May 4, 2017

I was bundling the scss with my own scss file, so I found that overriding the font path default variable worked for me:

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

Also, the loader config listed here has a nice regex test: https://www.npmjs.com/package/font-awesome-webpack-2

@alexsasharegan
Copy link

@alexsasharegan alexsasharegan commented May 4, 2017

Well, heads up to anyone else here, that was not the answer for me. That is the path that will be requested for you font assets from the font-awesome css. The link I posted to the webpack loader config did work for me though.

@caycecollins
Copy link

@caycecollins caycecollins commented Jul 4, 2017

I use the Font Awesome module, and here's what worked for me :

output:
publicPath: '/',

module.rules:

      {
        test: /.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
        loader: 'url-loader?limit=10000',
      },

using the copy-webpack-plugin and the extract-text-webpack-plugin, add this to plugins:

    new Copy([
      { from: 'node_modules/font-awesome/fonts', to: 'fonts' },
      { from: 'node_modules/font-awesome/css/font-awesome.min.css' },
    ]),
    new ExtractTextPlugin('style.css')
@tamilselvank
Copy link

@tamilselvank tamilselvank commented Mar 11, 2018

Node JS: Install the below command
npm i --save @fortawesome/fontawesome

@sivarajh
Copy link

@sivarajh sivarajh commented Mar 13, 2018

@alexsasharegan your solution worked for me! thanks a bunch!

@HaakonH
Copy link

@HaakonH HaakonH commented Sep 11, 2018

@ alexsasharegan - Your solution to change the variable in the font awesome _variables.scss worked for me dude!

old value: $fa-font-path: "../fonts"
new value: $fa-font-path: "~font-awesome/fonts/";

My setup: NG CLI created barebones project that I added font awesome to.

@danielrsantana
Copy link

@danielrsantana danielrsantana commented Feb 5, 2019

Here is how I've solved, considering the solutions posted by (@alexsasharegan and @cchamberlain):

My architecture:

    React 16.7.0
    Typescript 3.3.1
    Bulma 0.7.2 (similar to bootstrap)
    FontAwesome 5.7.1
  1. Package.json (packages I've used. You can switch to far or fal)
    (...)
    "dependencies": {
        "@fortawesome/fontawesome-free": "^5.7.1",
        "@fortawesome/free-solid-svg-icons": "^5.7.1",
    };
   (...)
  1. In your webpack.config (very essential):
    (...)
    {
        test: /.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
        use: "url-loader?limit=100000"
    }
    (...)
  1. In your main scss file :
    $fa-font-path : "~@fortawesome/fontawesome-free/webfonts";
    @import "./node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss";
    @import "./node_modules/@fortawesome/fontawesome-free/scss/solid.scss";
  1. That will allow you to use Font Awesome like this:
    <i className="fas fa-check" />

Just in time: if you want to use FontAwesome as a component, look at their documentation that well explains how to import the JS files to put it to work.

https://fontawesome.com/how-to-use/on-the-web/using-with/react

Hope it helps and I've posted here because since last message some packages changed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
You can’t perform that action at this time.