ReactでFontAwestome&CSSを使用する方法

2595 ワード

HTMLではFontawesomeがアイコンを使用しています.
反応が少し違う.
応答にFontwesomeを使用するには、まず
インストールが必要なものがあります.npmで取り付けることも、糸で取り付けることもできます.

設定

vscode端末からプロジェクトフォルダ

へ
次のコード

を入力します.

yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/react-fontawesome

「font」ではなく「fort」です.福貼.でも福を貼ると最後に貼るので~確認!

import

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { 사용할 아이콘 이름  } from '@fortawesome/free-solid-svg-icons';

https://fontawesome.com/
ここに行って欲しいアイコンを選んで
(free/solid以外の場所で選択する場合は、他のコンテンツをインストールする必要があります)

使用するアイコン名はfontarsumページの名前とは異なります.

このアイコンを使用する場合は、
使用するアイコン名にfaCircleUserと書きます.大文字と小文字に注意!
(FaUserCircleって書いてあるけどそっくり出てくるのは秘密じゃない…)

JSX部分は以下のようになります.

 <FontAwesomeIcon icon={faCircleUser} />

ここでデザイン(css)を提供したい場合は<>に書くことができます.
例えば、大きさを3倍に拡大して色をグレーにしたい場合は、このようにします.

 <FontAwesomeIcon icon={faCircleUser} size="3x" color="#BDBDBD" />

https://fontawesome.com/v5/docs/web/use-with/react
このページは詳しく表示されています.
結果はね.

この問題について(ReactでFontAwestome&CSSを使用する方法), 我々は、より多くの情報をここで見つけました https://velog.io/@owlsuri/React에서-FontAwesome-사용법-CSS

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol