Font Awesome 5 在 React 中使用社交/品牌图标答案

【问题标题】：Font Awesome 5 use social/brand icons in ReactFont Awesome 5 在 React 中使用社交/品牌图标
【发布时间】：2019-03-12 05:41:16
【问题描述】：

Font Awesome 文档仅展示了如何向 React 添加常规/纯色字体。社交图标呢？

首先我拿起包裹：

  npm i --save @fortawesome/fontawesome-svg-core \
  npm i --save @fortawesome/free-brands-svg-icons \
  npm i --save @fortawesome/react-fontawesome

注意：我将 npm i --save @fortawesome/free-solid-svg-icons \ 替换为 npm i --save @fortawesome/free-brands-svg-icons \

然后在 React 中：

import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faFacebookF } from '@fortawesome/free-brands-svg-icons' 

library.add(faFacebookF);

并尝试使用组件：

<FontAwesomeIcon icon="fa-facebook-f" />

甚至尝试过：

并继续进入控制台

找不到图标 {prefix: "fas", iconName: “fa-facebook-f”}

我相信我必须以某种方式获得品牌的 fab 前缀。

这是我要使用的图标https://fontawesome.com/icons/facebook-f?style=brands

【问题讨论】：

你试过<FontAwesomeIcon icon="facebook" />吗？
我收到Could not find icon {prefix: "fas", iconName: "facebook"}
你试过还是
是的，我也试过了

标签： reactjs font-awesome

【解决方案1】：

试试：

<FontAwesomeIcon icon={['fab', 'facebook-f']} />

请注意，font awesome 现在有不同的图标集。实体集 (fas) 是默认值。 facebook 图标位于品牌集中 (fab)。

【讨论】：

【解决方案2】：

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faFacebook } from "@fortawesome/free-brands-svg-icons"

const icon = <FontAwesomeIcon icon={faFacebook} />

我在FontAwesome's GitHub上找到了品牌图标的拼写/大小写

【讨论】：

【解决方案3】：

请注意，您必须运行您首先运行的命令：

npm i --save @fortawesome/fontawesome-svg-core 
npm i --save @fortawesome/free-brands-svg-icons 
npm i --save @fortawesome/react-fontawesome

我曾尝试在不先安装的情况下导入 - 当然这不起作用。

【讨论】：

【解决方案4】：

首先

npm i --save @fortawesome/fontawesome-svg-core 
npm i --save @fortawesome/free-brands-svg-icons 
npm i --save @fortawesome/react-fontawesome

然后在你的项目中导入

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

使用这个

<FontAwesomeIcon icon={faFacebookF} />

【讨论】：

【解决方案5】：

先安装这些依赖

npm i --save @fortawesome/free-brands-svg-icons 
npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/react-fontawesome

创建一个自定义库initFontAwesome.js 并粘贴此代码。

import { library } from "@fortawesome/fontawesome-svg-core";
import {fab, faTwitterSquare, faFacebook, faLinkedin, faGithub} from "@fortawesome/free-brands-svg-icons";

function initFontAwesome() {
    library.add(fab, faTwitterSquare, faFacebook, faLinkedin, faGithub);
}
export default initFontAwesome;

在App.js 中包含以下代码

import initFontAwesome from "./initFontAwesome";
initFontAwesome();

function App() {
  return (

   {/*---------Some code----------*/}

  );
}
export default App;

在Home.jsx 中包含以下代码

import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

{/*-------some Code---------*/}

<FontAwesomeIcon icon={['fab', 'twitter']} />

<FontAwesomeIcon icon={['fab', 'facebook']} />

<FontAwesomeIcon icon={['fab', 'linkedin']} />

<FontAwesomeIcon icon={['fab', 'github']} />

{/*-------Some Code---------*/}

This worked for me. I hope this helps!

【讨论】：