How to properly use fontawesome on React js?-CodePudding

First I install fontawesome and import it like this.

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

I find my icon and code for react

but it's not working for me.

CodePudding user response：

You can use it like this;

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'

<FontAwesomeIcon icon={faCoffee} />

You have to import icon. You can see detailed usage on docs.

CodePudding user response：

As written in font awesome documentation, you can easily use it like this:

First, install the package by:

npm install @fortawesome/fontawesome-svg-core
npm install @fortawesome/free-solid-svg-icons
npm install @fortawesome/react-fontawesome

Then you can use it like this:

  // Light:
  <FontAwesomeIcon icon={["fal", "coffee"]} />
  // Regular:
  <FontAwesomeIcon icon={["far", "coffee"]} />
  // Solid
  <FontAwesomeIcon icon={["fas", "coffee"]} />
  // ...or, omit as FontAwesome defaults to solid, so no need to prefix:
  <FontAwesomeIcon icon="coffee" />
  // Brand:
  <FontAwesomeIcon icon={["fab", "github"]} />

You can also use it like this:

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'

const element = <FontAwesomeIcon icon={faCoffee} />

Sizing:

  <FontAwesomeIcon icon="coffee" size="xs" />
  <FontAwesomeIcon icon="coffee" size="lg" />
  <FontAwesomeIcon icon="coffee" size="6x" />

CodePudding user response：

You can also create an account in FontAwesome, and create a kit for the latest version of font awesome which will give you a script tag, paste it into your index.html of your react app and paste html i tags for icons, and it shall work