Create-react-app: Using font awesome

[scwood]

I've upgraded to 0.2.0 which I think was supposed to fix this.

Importing bootstrap works just fine.

# index.js
import 'font-awesome/css/font-awesome.css'

Compiling...                                                                                                                                                                                           [0/0]
Failed to compile.

Error in ./~/font-awesome/fonts/fontawesome-webfont.eot?v=4.6.3
Module parse failed: /Users/spencer/code/day-by-day-webapp/node_modules/font-awesome/fonts/fontawesome-webfont.eot?v=4.6.3 Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '�' (1:0)
 @ ./~/react-scripts/~/css-loader!./~/react-scripts/~/postcss-loader!./~/font-awesome/css/font-awesome.min.css 6:243-294

Error in ./~/font-awesome/fonts/fontawesome-webfont.woff2?v=4.6.3
Module parse failed: /Users/spencer/code/day-by-day-webapp/node_modules/font-awesome/fonts/fontawesome-webfont.woff2?v=4.6.3 Unexpected character '' (1:4)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '' (1:4)
 @ ./~/react-scripts/~/css-loader!./~/react-scripts/~/postcss-loader!./~/font-awesome/css/font-awesome.min.css 6:412-465

Error in ./~/font-awesome/fonts/fontawesome-webfont.woff?v=4.6.3
Module parse failed: /Users/spencer/code/day-by-day-webapp/node_modules/font-awesome/fonts/fontawesome-webfont.woff?v=4.6.3 Unexpected character '' (1:4)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '' (1:4)
 @ ./~/react-scripts/~/css-loader!./~/react-scripts/~/postcss-loader!./~/font-awesome/css/font-awesome.min.css 6:495-547

Error in ./~/font-awesome/fonts/fontawesome-webfont.ttf?v=4.6.3
Module parse failed: /Users/spencer/code/day-by-day-webapp/node_modules/font-awesome/fonts/fontawesome-webfont.ttf?v=4.6.3 Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '' (1:0)
 @ ./~/react-scripts/~/css-loader!./~/react-scripts/~/postcss-loader!./~/font-awesome/css/font-awesome.min.css 6:576-627

Error in ./~/font-awesome/fonts/fontawesome-webfont.svg?v=4.6.3
Module parse failed: /Users/spencer/code/day-by-day-webapp/node_modules/font-awesome/fonts/fontawesome-webfont.svg?v=4.6.3 Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:0)
 @ ./~/react-scripts/~/css-loader!./~/react-scripts/~/postcss-loader!./~/font-awesome/css/font-awesome.min.css 6:660-711

[insin]

Fix: the loaders for font resources need a (\?v=\d+\.\d+\.\d+)? on the end of their RegExps.

[gaearon]

Woah, I didn't know. Happy to accept a fix.

[alexzherdev]

Yup, just recently stumbled upon this independently on my project. Happy to provide a fix 😃 if no one has started on this.

[gaearon]

This should be fixed in the new version. Can you please verify? Please find the upgrade instructions here.

[scwood]

Yep, everything is working!

[ickyrr]

+1
Thanks @insin !

[neelendu25]

I am very new to react in fact front end .. can you please help me with loader syntax to include (\?v=\d+.\d+.\d+)? in loaders
module: {
loaders: [
{ test: /.js$/, loaders: ['babel'], exclude: /node_modules/ }
]
}
}