0

According to Font Awesome documentation, I followed this example below but didn't get any result. I used font awesome a lot of time on my html project in the past. But this is for the first time I am using it on my React Application. How can I get the icons from font awesome on my react application?

  import React from 'react'
  import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

  export const Beverage = () => (
    <div>
      <FontAwesomeIcon icon="check-square" />
      Your <FontAwesomeIcon icon="coffee" /> is hot and ready!
    </div>
  )

There is my package.json dependencies.

"dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.1.2",
    "@fortawesome/free-solid-svg-icons": "^6.1.2",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^0.27.2",
    "bootstrap": "^5.2.0",
    "formik": "^2.2.9",
    "jquery": "^3.6.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^8.0.2",
    "react-router": "^6.3.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
    "redux": "^4.2.0",
    "redux-thunk": "^2.4.1",
    "web-vitals": "^2.1.4"
  }
Ferdous Hasan
  • 48
  • 5
  • check if font awesome is available in package.json ex: "font-awesome": "^4.7.0", check if it's css link is present in /public/index.html – Chandan Aug 24 '22 at 07:57
  • install using either npm or yarn package manager if it is not present in package.json: npm i --save @fortawesome/fontawesome-svg-core npm install --save @fortawesome/free-solid-svg-icons npm install --save @fortawesome/react-fontawesome – Chandan Aug 24 '22 at 08:00
  • I don't wanna do like this. I wanna get the icons by using React Component as the documentation says. If I don't use this cdn, can't I get them? Or is there another way? – Ferdous Hasan Aug 24 '22 at 08:01
  • then, you need to install it locally using npm/yarn, see my other comment above. – Chandan Aug 24 '22 at 08:02
  • I install every packages through npm. This example is not working. – Ferdous Hasan Aug 24 '22 at 08:03
  • could you please share your package.json? – Chandan Aug 24 '22 at 08:03
  • I shared on my post. Could you please check it? – Ferdous Hasan Aug 24 '22 at 08:12

1 Answers1

4

https://github.com/FortAwesome/react-fontawesome

Commands : install fontawesome & react-fontawesome

$ npm i --save @fortawesome/fontawesome
$ npm i --save @fortawesome/react-fontawesome
$ npm i --save @fortawesome/fontawesome-free-solid
$ npm i --save @fortawesome/fontawesome-free-regular
$ npm i --save @fortawesome/fontawesome-svg-core

then in your component app.

import React, { Component } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/fontawesome-free-solid'

     export const Beverage = () => (
        <div>
    
          Your  <FontAwesomeIcon icon={faCoffee} />is hot and ready!
        </div>
      )
Shammi Singh
  • 369
  • 1
  • 4