Question

我像下面这样安装软件包：https://www.npmjs.com/package/react-fontawesome，我尝试使用它，但是看不到任何图标，知道吗？

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

尝试如下

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

您需要从CDN导入CSS或在构建过程中添加它。

来自图书馆：

注意：此组件不包含任何Font Awesome CSS或字体，因此您需要确保在其末尾包含这些字体通过某种方式将它们添加到您的构建过程中或链接到CDN 版本。

因此，您需要做的就是将其添加到index.html：

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

没有出现react-fontawesome图标

2 个答案: