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

IT技术 reactjs font-awesome
2021-04-28 17:00:49

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

4个回答

尝试：

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

请注意，字体真棒现在有不同的图标集。实体集 ( fas) 是默认设置。facebook 图标位于品牌集 ( fab) 中。

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

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

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

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

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/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} />
其它你可能感兴趣的问题
上一篇如何将 STL 文件转换为 PDF 图纸？ 下一篇使用 Marlin 中的滞后进行腔室加热