代码之家 › 专栏 › 技术社区 › 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" />

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

9 月前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

9 月前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

9 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

10 月前

Luckkks · 过渡色工作不正常

10 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

10 月前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

10 月前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

10 月前

noblerare · Vite错误-未定义导出(SSR)

10 月前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

10 月前