web-dev-qa-db-ja.com

Font Awesome 5では、React

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 \ with 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"、アイコン名： "fa-facebook-f"}

ブランドのfabプレフィックスを何らかの方法で取得する必要があると思います。

これは私が使いたいアイコンです https://fontawesome.com/icons/facebook-f?style=brands

reactjsfont-awesome
9
CyberJ

試してください：

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

フォントawesomeにはさまざまなアイコンセットがあります。ソリッドセット（fas）がデフォルトです。 Facebookアイコンはブランドセット（fab）にあります。

25
David L. Walsh
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faFacebook } from "@fortawesome/free-brands-svg-icons"

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

FontAwesome's GitHub でブランドアイコンのスペル/ケースを見つけました

8
BillFienberg