CODEWITHSUNDEEP
reactjs
Sumeet
Sumeet

Reputation: 21

fontawesome icon not working correctly in react.js

Can anyone give me an example of using font-awesome in React.js? I have imported the react font-awesome. But the icon doesn't show on the browser. I can see the classname has been set on the dom but there is no CSS style associated with the dom.

Steps followed by me

1) npm install --save react-fontawesome

2) Inside my JS file :

   import FontAwesome from 'react-fontawesome';
   <FontAwesome name="rocket size="lg"" />

Upvotes: 2

Views: 12104

Answers (2)

haidar
haidar

Reputation: 1799

Late to the party, but the easiest way is to use @fortawesome/react-fontawesome as mentioned on fontawesome website. install the package with

 yarn add @fortawesome/fontawesome-svg-core
 yarn add @fortawesome/free-solid-svg-icons
 yarn add @fortawesome/react-fontawesome

After that simply import the pack

import { faCog } from "@fortawesome/free-solid-svg-icons"

And use it

<FontAwesomeIcon icon={faCog} />

Upvotes: 0

pedrommuller
pedrommuller

Reputation: 16066

If you are using webpack with react.js what you need to do is to load the font with a loader, first install font-awesome and then configure the loader in webpack.

{
    test: /\.(woff2?|ttf|svg|eot)(\?v=\d+\.\d+\.\d+)?$/,
    loader: 'file-loader',
}

try it out and let me know.

Edit:

I forgot to mention that you should import font awesome CSS

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

then just reference like any other class like:

<span className="fa fa-facebook"></span>

Upvotes: 1

Related Questions