❏ React - FontAwesome 사용방법!

안녕하세요!

 

오늘은 React에서의 FontAwesome 사용방법에 대해서 알아보겠습니다!

 

이모저모 많이 사용하는 FontAwesome이니 활용해 보시면 좋을 것 같네요!

 

d=(´▽｀)

---

✎ React에서  FontAwesome 설치법!

 

먼저 터미널에 하나씩 아래와 같이 작성해주세요!

 

설치 후 Package.json 파일에서 설치가 잘 되었는지 확인해 주세요!

//FontAwesome 설치방법!

npm i --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons // 솔리드 스타일
npm install --save @fortawesome/free-regular-svg-icons // 레귤러 스타일
npm install --save @fortawesome/react-fontawesome

이제 FontAwesome이 설치가 되었으니 활용해 보도록 하겠습니다!

 

 

✎ React에서  FontAwesome 활용법!

 

그럼 이제 활용하는 방법에 대해서 알아보겠습니다!

 

먼저 원하는 js파일의 상단에 import 해주세요!

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

 import 후 FontAwesome 홈페이지에 접속해 주세요!

 

 

👇👇👇 FontAwesome 바로가기! 👇👇👇

https://fontawesome.com

Font Awesome

 

접속 후 원하는 아이콘을 선택해 주세요!

 

저는 의사 선생님을 찾아보겠습니다! 

 

선택 후 아래의 React로 선택해 주세요!

React에 import 하는 부분은 fa~ 뒷부분입니다!

여기요!

 

여기에서 주의할 점은 꼭 CamelCase로 작성해주어야 합니다! (아니면 React에서 오류가 발생할 수 있습니다!)

 

---

👉  CamelCase 표기방법??

카멜 표기법(Camel case 카멜 케이스[*]) 또는 낙타 표기법은 프로그래밍에서 파일, 변수, 함수 등 대상의 이름을 띄어쓰기 없이 짓기 위하여 따르는 관례인 네이밍컨벤션(Naming convention)의 하나다.

단어 전체적으로 소문자를 사용하지만, 맨 첫 글자를 제외한 각 합성어의 첫 글자만 대문자로 표기한다. 합성한 단어의 모양이 쌍봉낙타의 등과 비슷하다는 뜻에서 이름 붙었다.

 

- 출처 : 위키백과

---

 

상단에 필요한 아이콘을 선택 후 상단에 import 해줍니다!

작성 후 필요한 부분에 컴포넌트를 입력해 주세요!

한번 확인해 볼까요??

이렇게 아이콘이 잘 적용된 것을 볼 수 있었습니다!

 

(°∀°) b

---

👇👇👇 html에서도 사용하는 방법 알아보기! 👇👇👇

 

❏ html - Font Awesome 사용하기!

 

오늘도 읽어주셔서 감사합니다!

❤*.(๓´͈ ˘ `͈๓).*❤