javascript - How to import font-awesome in node.js to use in react.js?

I am working with node.js and react.js. I already imported my own css file like so:

import React from 'react';
import Modal from 'react-modal';
import './../App.css';

this works fine, but when I try to add font-awesome like so:

import './src/font-awesome-4.7.0/css/font-awesome.css'

then it doesn't work.

Am I doing something wrong? Or is there maybe another way?

I am working with node.js and react.js. I already imported my own css file like so:

import React from 'react';
import Modal from 'react-modal';
import './../App.css';

this works fine, but when I try to add font-awesome like so:

import './src/font-awesome-4.7.0/css/font-awesome.css'

then it doesn't work.

Am I doing something wrong? Or is there maybe another way?

Share Improve this question asked Jun 21, 2017 at 15:15 sventastic 453 silver badges10 bronze badges

1 then it doesn't work. - That error is very mon and means something very specific is wrong but it won't tell us exactly what. - Is there any errors showing up anywhere? Is the specified location correct and reachable by your code? – Nope Commented Jun 21, 2017 at 15:22
font-awesome import font's with a relative path, importing css by this way break the relative path. Do you use webpack ? – Vashnak Commented Jun 21, 2017 at 15:29
You are trying to import a css file in javascript? That's not possible. The import statement is to "import functions, objects or primitives that have been exported from an external module, another script, etc." - MDN. – Chris Commented Jun 21, 2017 at 15:35
Try out npmjs./package/react-fa for FontAwesome in React, gives it a nice clean interface. – Ben Hare Commented Jun 21, 2017 at 15:50
Also check out react-icons – glennreyes Commented Jun 21, 2017 at 15:58

| Show 2 more ments

1 Answer 1

Sorted by: Reset to default 8

Here's how i did it entirely in the front end react side:

Include font awesome inside the <head> tag

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./font-awesome/4.7.0/css/font-awesome.min.css">

Import the file and use it in your react ponents

import FontAwesome from 'react-fontawesome';

// ..rest of your code
<FontAwesome name="linkedin" size="2x"/>