我如何在 React 中使用 Font Awesome 图标？

Question

I want to use fontAwesome icons in ReactJs. I have not done this before. I want to do something like home Icons as well as Signout Icons in React.

Here is what I have done so far.

I included the font awesome Lib

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

Now I want to use in the application Like so

                        <td width="150px">
                        <p align="center"/>
                        <button className="btn"><i className='icon-home'></i></button>
                        </td>
                        <td width="135">
                            <p align="center"/>
                        <button className="btnSignout"><i className='fa fa-home'></i></button>
                        </td>

How do I use FontAwesome in React Application?

Answer 1

To use font awesome icons in easy way into your React project use react-icon library which not only provides support for font awesome but as well as provides for Bootstrap icons , Heroicons and more.

Step 1. npm install react-icons --save

step 2. Import a icon like this -

 import { FaBeer } from 'react-icons/fa';

Note : FaBeer is icon name here for more icons visit to react-icons

Step 3. Use it something like this -

 class Question extends React.Component { render() { return <h3> Lets go for a <FaBeer />? </h3> } }

Answer 2

You can do this, check below code or click here for demo

Please double check the libraries I used and install

import React, { Component } from 'react';
import { render } from 'react-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCoffee, faBars } from '@fortawesome/free-solid-svg-icons';
import 'bootstrap/dist/css/bootstrap.min.css';

class App extends Component {
  constructor() {
    super();
  }

  render() {
    return (
      <div>
        <p>Please check this</p>

        <button className="btn btn-primary">
          <FontAwesomeIcon icon={faBars} size={'1x'} />
          <span style={{ marginLeft: '10px' }}> My Button</span>
        </button>

        <br />
        <br />
        <FontAwesomeIcon icon={faCoffee} size={'2x'} />
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

Answer 3

To use Font Awesome in the react project, you should have to -

1. install the following packages (run the following commands in the terminal)

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

2. Now it's time to call and use into the JavaScript file.

import into the file the following 2 lines.

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

The format of using icon is as follow,

<FontAwesomeIcon icon={faIconName, faAnotherIconName} />

for Example: `<FontAwesomeIcon icon={faAnchor, faMugHot} />

Note: icon name will be camelcase fa<IconName> . for example, in the font-awesome website font name is fa-anchor we can write it as faAnchor . for long name of the icon, if the name is fa-mug-hot we have to write it as faMugHot .