react-fontawesome 图标没有出现

Question

I installed the package like it is here: https://www.npmjs.com/package/react-fontawesome and I tried to use it but no icons visible, any idea ?

import React, { Component } from 'react';
import FontAwesome from 'react-fontawesome';

export default class Header extends Component {

    state = {
        showNav: false
    }

    render() {
        return (
            <div className="open_nav">
                  <FontAwesome name="rocket"/>

            </div>

        )
    }
}

Answer 1

Try like below

import React, { Component } from 'react';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faChevronDown } from "@fortawesome/free-solid-svg-icons";

    export default class Header extends Component {

        state = {
            showNav: false
        }

        render() {
            return (
                <div className="open_nav">
                      <FontAwesomeIcon icon={faChevronDown} />
                </div>

            )
        }
    }

Answer 2

You need to either import CSS from CDN or add it in your build process.

From the library:

Note: This component does not include any of the Font Awesome CSS or fonts, so you'll need to make sure to include those on your end somehow, either by adding them to your build process or linking to CDN versions.

So, all you need to do is add this to your index.html :

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