Font Awesome 5在React中使用社交/品牌图标 [英] Font Awesome 5 use social/brand icons in React
问题描述
Font Awesome文档仅显示如何向React添加常规/纯色字体.社交图标怎么样?
The Font Awesome documentation shows only how to add regular/solid fonts to React. How about social icons?
首先,我抓起了包裹:
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" />
甚至尝试过:
并继续进入控制台
找不到图标{前缀:"fas",iconName: "fa-facebook-f"}
Could not find icon {prefix: "fas", iconName: "fa-facebook-f"}
我认为我必须以某种方式获得品牌的fab
前缀.
I believe I somehow have to get the fab
prefix for brands.
这是我要使用的图标 https://fontawesome.com/icons/facebook-f?style = brands
推荐答案
尝试:
<FontAwesomeIcon icon={['fab', 'facebook-f']} />
请注意,真棒字体现在具有不同的图标集.实体集(fas
)是默认设置. Facebook图标位于品牌集(fab
)中.
Note that font awesome now has different icon sets. The solid set (fas
) is the default. The facebook icon is in the brands set (fab
).
这篇关于Font Awesome 5在React中使用社交/品牌图标的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!