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

Posted 2023-04-13

【中文标题】Font Awesome 5 在 React 中使用社交/品牌图标

【英文标题】：Font Awesome 5 use social/brand icons in 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"

你试过还是

是的，我也试过了

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