React 页脚中的字体真棒图标答案

【问题标题】：Font Awesome Icon in React FooterReact 页脚中的字体真棒图标
【发布时间】：2021-02-05 16:32:33
【问题描述】：

有谁知道我在设置页脚时如何在页脚中实现 Font Awesome 社交图标？


export const FooterItems = [
    {
        title: '',
        url: '/',
        cName: 'footer-links',
        icon: <FontAwesomeIcon icon={['fab', 'github']} size="2x"/>
    },    
    {
        title: 'View',
        url: '/view',
        cName: 'footer-links'
    },

这显然不起作用我只是想展示我正在尝试做的事情。这是我的 footer.js 文件

import React from "react";
import { FooterItems } from "./FooterItems";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import './Footer.css'

class Footer extends React.Component {
    state = { clicked: false }

    handleClick = () => {
        this.setState({ clicked: !this.state.clicked })
    }

    render() {
        return (
            <footer className="FooterItems">
                <div>
                    <FontAwesomeIcon icon={['fab', 'github']} size="2x"/>
                    <FontAwesomeIcon icon={['fab', 'facebook']} size="2x"/>
                    <FontAwesomeIcon icon={['fab', 'twitter']} size="2x"/>
                    <FontAwesomeIcon icon={['fab', 'instagram']} size="2x"/>
                </div>

                <ul className={this.state.clicked ? 'footer-menu active' : 'footer-menu'}>
                    {FooterItems.map((item, index) => {
                        return (
                            <li key={index}>
                                <a className={item.cName} href={item.url}>
                                    {item.title}{item.icon}
                                </a>
                            </li>
                        )
                    })}

                </ul>
            </footer>
        )
    }
}

export default Footer

图标显示在这里，所以这样做更容易吗？如果是这样，我会在这里添加Link 吗？

【问题讨论】：

这能回答你的问题吗？ Add link to Font Awesome icon in ReactJS

标签： reactjs

【解决方案1】：

您还应该包括 @fortawesome/free-brands-svg-icons（用于品牌）， @fortawesome/free-solid-svg-icons（用于实体图标），

像这样在你的包中：

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faGithub } from '@fortawesome/free-brands-svg-icons';

然后你可以将它们放在一个标签中以链接到一个 url：

<div>
  <a href="/////">
     <FontAwesomeIcon icon={faGithub} />
  <a>
</div>

【讨论】：

【解决方案2】：

引用FontAwesome documentation，您尚未初始化 FontAwesone 应用和库。

在App.js 中，您需要添加以下导入和库初始化：

import { library } from "@fortawesome/fontawesome-svg-core";
import { fab } from "@fortawesome/free-brands-svg-icons";

library.add(fab);

这是working example。

【讨论】：