Reactgo: How to include font-awesome?

Created on 8 Nov 2016  Â·  14Comments  Â·  Source: reactGo/reactGo

Description

  • Type: Question

Question

How to use font-awesome with reactGo?

I've tried npm installing font-awesome and in my css doing:

.my-icon {
    composes: fa fa-circle-thin from 'font-awesome/css/font-awesome.css';
}
question
Source
picture sys13

Most helpful comment

The paths you are requiring have querystrings in there

try adding (\?v=\d+\.\d+\.\d+)? or something

test: /.(png|jpg|jpeg|gif|svg|woff|woff2|eot|ttf)(\?v=\d+\.\d+\.\d+)?$/,
picture psimyn on 8 Nov 2016
👍4 😄1

All 14 comments

Try using relative path to node_modules/font-awesome

ZeroCho picture ZeroCho on 8 Nov 2016

Both font-awesome/... and ../../../node_modules/font-awesome/... lead to this error message:

ERROR in ./~/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0
Module parse failed: /home/angel/prj/telepossible/node_modules/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0 Unexpected character '' (1:4)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '' (1:4)
    at Parser.pp$4.raise (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp$7.getTokenFromCode (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:2756:10)
    at Parser.pp$7.readToken (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:2477:17)
    at Parser.pp$7.nextToken (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:2468:15)
    at Parser.pp$7.next (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:2413:10)
    at Parser.pp$3.parseIdent (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:2191:10)
    at Parser.pp$3.parseExprAtom (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:1774:21)
    at Parser.pp$3.parseExprSubscripts (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:1597:21)
    at Parser.pp$3.parseExpression (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:1573:21)
    at Parser.pp$1.parseStatement (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:727:47)
    at Parser.pp$1.parseTopLevel (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:638:25)
    at Parser.parse (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:516:17)
 @ ./~/css-loader?module&localIdentName=[name]__[local]___[hash:base64:5]!./~/font-awesome/css/font-awesome.css 6:479-532

ERROR in ./~/font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0
Module parse failed: /home/angel/prj/telepossible/node_modules/font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0 Unexpected character '�' (1:1)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '�' (1:1)
    at Parser.pp$4.raise (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp$7.getTokenFromCode (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:2756:10)
    at Parser.pp$7.readToken (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:2477:17)
    at Parser.pp$7.nextToken (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:2468:15)
    at Parser.pp$7.next (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:2413:10)
    at Parser.pp$3.parseIdent (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:2191:10)
    at Parser.pp$3.parseExprAtom (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:1774:21)
    at Parser.pp$3.parseExprSubscripts (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:1597:21)
    at Parser.pp$3.parseExpression (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:1573:21)
    at Parser.pp$1.parseStatement (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:727:47)
    at Parser.pp$1.parseTopLevel (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:638:25)
    at Parser.parse (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:516:17)
 @ ./~/css-loader?module&localIdentName=[name]__[local]___[hash:base64:5]!./~/font-awesome/css/font-awesome.css 6:304-355

ERROR in ./~/font-awesome/fonts/fontawesome-webfont.eot
Module parse failed: /home/angel/prj/telepossible/node_modules/font-awesome/fonts/fontawesome-webfont.eot Unexpected character '�' (1:1)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '�' (1:1)
    at Parser.pp$4.raise (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp$7.getTokenFromCode (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:2756:10)
    at Parser.pp$7.readToken (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:2477:17)
    at Parser.pp$7.nextToken (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:2468:15)
    at Parser.pp$7.next (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:2413:10)
    at Parser.pp$3.parseIdent (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:2191:10)
    at Parser.pp$3.parseExprAtom (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:1774:21)
    at Parser.pp$3.parseExprSubscripts (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:1597:21)
    at Parser.pp$3.parseExpression (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:1573:21)
    at Parser.pp$1.parseStatement (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:727:47)
    at Parser.pp$1.parseTopLevel (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:638:25)
    at Parser.parse (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:516:17)
 @ ./~/css-loader?module&localIdentName=[name]__[local]___[hash:base64:5]!./~/font-awesome/css/font-awesome.css 6:378-421

ERROR in ./~/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0
Module parse failed: /home/angel/prj/telepossible/node_modules/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0 Unexpected character '' (1:4)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '' (1:4)
    at Parser.pp$4.raise (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp$7.getTokenFromCode (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:2756:10)
    at Parser.pp$7.readToken (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:2477:17)
    at Parser.pp$7.nextToken (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:2468:15)
    at Parser.pp$7.next (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:2413:10)
    at Parser.pp$3.parseIdent (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:2191:10)
    at Parser.pp$3.parseExprAtom (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:1774:21)
    at Parser.pp$3.parseExprSubscripts (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:1597:21)
    at Parser.pp$3.parseExpression (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:1573:21)
    at Parser.pp$1.parseStatement (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:727:47)
    at Parser.pp$1.parseTopLevel (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:638:25)
    at Parser.parse (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:516:17)
 @ ./~/css-loader?module&localIdentName=[name]__[local]___[hash:base64:5]!./~/font-awesome/css/font-awesome.css 6:563-615

ERROR in ./~/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0
Module parse failed: /home/angel/prj/telepossible/node_modules/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0 Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '' (1:0)
    at Parser.pp$4.raise (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp$7.getTokenFromCode (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:2756:10)
    at Parser.pp$7.readToken (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:2477:17)
    at Parser.pp$7.nextToken (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:2468:15)
    at Parser.parse (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:515:10)
    at Object.parse (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:3098:39)
    at Parser.parse (/home/angel/prj/telepossible/node_modules/webpack/lib/Parser.js:902:15)
    at DependenciesBlock.<anonymous> (/home/angel/prj/telepossible/node_modules/webpack/lib/NormalModule.js:104:16)
    at DependenciesBlock.onModuleBuild (/home/angel/prj/telepossible/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
    at nextLoader (/home/angel/prj/telepossible/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
    at /home/angel/prj/telepossible/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
    at Storage.finished (/home/angel/prj/telepossible/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
    at /home/angel/prj/telepossible/node_modules/graceful-fs/graceful-fs.js:78:16
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:445:3)
 @ ./~/css-loader?module&localIdentName=[name]__[local]___[hash:base64:5]!./~/font-awesome/css/font-awesome.css 6:645-696

ERROR in ./~/font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0
Module parse failed: /home/angel/prj/telepossible/node_modules/font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0 Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:0)
    at Parser.pp$4.raise (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp.unexpected (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:603:10)
    at Parser.pp$3.parseExprAtom (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:1822:12)
    at Parser.pp$3.parseExprSubscripts (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:1597:21)
    at Parser.pp$3.parseExpression (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:1573:21)
    at Parser.pp$1.parseStatement (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:727:47)
    at Parser.pp$1.parseTopLevel (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:638:25)
    at Parser.parse (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:516:17)
    at Object.parse (/home/angel/prj/telepossible/node_modules/acorn/dist/acorn.js:3098:39)
    at Parser.parse (/home/angel/prj/telepossible/node_modules/webpack/lib/Parser.js:902:15)
    at DependenciesBlock.<anonymous> (/home/angel/prj/telepossible/node_modules/webpack/lib/NormalModule.js:104:16)
    at DependenciesBlock.onModuleBuild (/home/angel/prj/telepossible/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
 @ ./~/css-loader?module&localIdentName=[name]__[local]___[hash:base64:5]!./~/font-awesome/css/font-awesome.css 6:730-781
sys13 picture sys13 on 8 Nov 2016

test: /.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
loader: 'url',
query: {
name: '[hash].[ext]',
limit: 10000,
}

add eot ttf here in webpack.config.js

ZeroCho picture ZeroCho on 8 Nov 2016

I added |eot without luck. Then |eot|ttf. Still the same error

sys13 picture sys13 on 8 Nov 2016

The paths you are requiring have querystrings in there

try adding (\?v=\d+\.\d+\.\d+)? or something

test: /.(png|jpg|jpeg|gif|svg|woff|woff2|eot|ttf)(\?v=\d+\.\d+\.\d+)?$/,
psimyn picture psimyn on 8 Nov 2016
👍4 😄1

Thanks, that worked in dev for me.

To get it working in prod I copied font-awesome from node_modules into my local src.

sys13 picture sys13 on 9 Nov 2016

It works in prod without copying it into your local src.

ZeroCho picture ZeroCho on 9 Nov 2016

In prod I get Error: Cannot find module "css/components/navigation.css

sys13 picture sys13 on 9 Nov 2016
❤1 😕1 👎1

@psimyn, your answer seems to be wrong

test: /\.(svg|woff|woff2|eot|ttf)(\?v=\d+\.\d+\.\d+)?$/
ghost picture ghost on 16 Feb 2017

Does anyone know how to add font-awesome support in the latest version? Thanks.

pliu6 picture pliu6 on 18 Mar 2017

test: /.(png|jpg|jpeg|gif|svg|woff|woff2|eot|ttf)(\?v=\d+\.\d+\.\d+)?$/, after adding this code into "webpack/rules/images.js", you should put eot and ttf files into the image folder. It worked.

trda picture trda on 31 Jul 2017

Closing as it seems to be solved. In case you still have an issue, please comment here or open a new one.

slavab89 picture slavab89 on 20 Oct 2017

  • [ ]

  • [ ]

  • [x] фывфыв

Doc-Code picture Doc-Code on 10 Dec 2017

Hi I am facing issue during "npm run build:prod"
Error: ERROR in ./~/font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0

maneeshrao66 picture maneeshrao66 on 24 May 2018
Was this page helpful?
0 / 5 - 0 ratings

Related issues

choonkending picture choonkending  Â·  9Comments
choonkending picture choonkending  Â·  8Comments
zacharybrady picture zacharybrady  Â·  4Comments
choonkending picture choonkending  Â·  8Comments
newasmod picture newasmod  Â·  4Comments