✏️ Font-Awesome(폰트어썸) 사용법과 설치(React,Next 14v)

 

 

 

FontAwesome이란?

폰트어썸은 웹페이지에서 아이콘이 필요할때 가장 많이 사용되는 라이브러리이다.

지금 포스팅을 작성하는 이후로는 주변에서 쓰는 사람을 많이 못봤지만 (ㅠㅠ)
미래의 내가 다시 사용할 때 빠르게 보려고 정리하는 겸 작성해본다!

 

 

 

 

 

링크 

Font Awesome

 

 

 

 

 

 

 

 

 

Icon탭으로 가서 free를 클릭하면 내가 필요한 아이콘들을 볼 수 있다.

 

 

 

---

 

✨ 순서대로 설치해보자

npm add @fortawesome/fontawesome-svg-core

 

 

 

Free용 아이콘 라이브러리 설치

npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/free-brands-svg-icons

 

 

 

마지막으로 React에 맞는 구성요소 설치 (컴포넌트를 사용할 것이라는 뜻)

npm i --save @fortawesome/react-fontawesome@latest

 

 

---

 

✨ 설치는 끝났다! 내가 쓸 아이콘을 가져와보자

 

나는 깃허브 아이콘과 블로그로 이동할 수 있는 아이콘이 필요해서 먼저 깃허브 부터 가지고 오는 것을 해보려고 한다.

github를 검색해서 가지고 올 아이콘을 클릭해준다.

 

 

 

 

 

 

 

클릭하고, 리액트용 탭을 클릭해준다.

 

 

 

 

 

 

코드를 클릭하면 코드 복사를 할 수 있다.

 

 

---

 

✨ 사용할 컴포넌트에 import로 불러오기

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

 

import로 폰트어썸을 가져왔고, 이제 해당 아이콘을 넣어주면 되는데

불러올때 브랜드용 아이콘과 브랜드용 아이콘 아닌 것 들이 있다.

이것을 유의해서 가지고 와야한다.

 

 

브랜드용 아이콘 불러올 때  (깃허브 같은 아이콘 들)

import { faSquareGithub, faBlogger } from "@fortawesome/free-brands-svg-icons";

 

 

 

브랜드용 아이콘 쓸때 사용 설치 (화살표같은 아이콘 들)

import { faArrowUp } from "@fortawesome/free-solid-svg-icons";

 

 

 

 

 

복사한 내용 붙여넣기

앞서 코드를 복사해서 가져온 것을 return 영역에 붙여준다.

<FontAwesomeIcon icon="fa-solid fa-arrow-up" />

 

 

🔥 주의사항

이렇게 가져와서 붙여넣으면 동작을 안하는데, icon을 `{}` 중괄호로 묶어줘야한다.

예시로, `fa-arrow-up`이면 `카멜 케이스`로 `faArrowUp`으로 import 해서 불러와야 한다. 

 

 

예시 코드

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; //폰트어썸 import
import { faSquareGithub, faBlogger } from "@fortawesome/free-brands-svg-icons"; //브랜드용 import
import { faArrowUp } from "@fortawesome/free-solid-svg-icons"; //브랜드 아닌것들 import

const Home = () => {
  return (
    <> 
    	<FontAwesomeIcon icon={faSquareGithub} /> //깃허브 아이콘
        <FontAwesomeIcon icon={faBlogger} /> //블로그 아이콘
        <FontAwesomeIcon icon={faArrowUp} /> //화살표 아이콘
    </>
  );
};

export default Home;

 

 

 

 

 

순서대로 적용한 결과

 

이렇게 아이콘들을 가져올 수 있는 것을 확인해 볼 수 있다!

 

 

 

 

 

 

Docs

Use React with...