react-fontawesome 图标没有出现

Posted 2023-02-25

【中文标题】react-fontawesome 图标没有出现

【英文标题】：react-fontawesome icons does not appear

【发布时间】：2020-01-27 20:39:40

【问题描述】：

我像这里一样安装了该软件包：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>

        )
    

【参考方案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>

            )
        
    

【参考方案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" />