代码之家 › 专栏 › 技术社区 › zac

react fontawesome图标未出现

reactjs

zac · 技术社区 · 5 年前

我按照如下方式安装了该软件包: 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>

        )
    }
}

0 回复 | 直到 5 年前

Jaison James 5 年前

尝试如下

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>

            )
        }
    }

technophyle 5 年前

您需要从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" />

推荐文章

BADRUM · 执行两个获取功能后,如何导航回页面?

1 年前

Agrim Singh · 对象无效,因为使用React router dom时显示React子错误

1 年前

Anaya Ammar · 渲染后未显示的值

1 年前

matin kahrizi · 当我的状态更改时,useSelector不更新

1 年前

YotiPoti · 我的照片太大了,无法容纳我的HTML画布。我该怎么办?

1 年前

Zemelon · -moz背面可见性不适用于顺风css

1 年前

Abdelaziz Elrasheed · 如何成为专业的网页开发人员。。。?[已关闭]

1 年前

JustTrynaProgram · React和Tailwind-从配置中读取自定义断点值

1 年前

Mark C. · 制作一个可松开的单选按钮[关闭]

1 年前

Tridip Lodh · 在ES6中,JAVASCRIPT函数在“严格使用”模式下的行为如何?[已关闭]

1 年前