[Next.js] Next.js/React 에 Font Awesome Icon 적용하기/ 아이콘 추가하는 법

📌 Font Awesome 

---

https://fontawesome.com/icons

Font Awesome

 

해당 사이트에서 Icon 관련하여 사용할 수 있습니다

 

 

아이콘을 적용하는 데 두 가지 방법이 있습니다.

 

1. Global Import

<FontAwesomeIcon icon="fa-regular fa-envelope" />

 

2. Indivisual Import

<FontAwesomeIcon icon={faEnvelope} />

 

 

 

 

 

📌 방법

---

1. fontawesome 설치하기

npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome

 

 

2. _app.js  파일 생성

project-name/pages/_app.js 와 같이 _app.js 파일을 생성해줍니다. 

pages 폴더는 app 과 같은 선상에 있습니다(project-name/app)

 

그리고 _app.js에 아래와 같이 코드를 입력합니다.

import { config } from "@fortawesome/fontawesome-svg-core";
import "@fortawesome/fontawesome-svg-core/styles.css";
config.autoAddCss = false;

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

 

 

3. 적용하기

아이콘을 적용 할 파일에 다음과 같이 입력합니다. 

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faEnvelope } from "@fortawesome/free-regular-svg-icons";

export default function Footer() {
  return (
    <div>
      <div>
          <FontAwesomeIcon
            icon={faEnvelope}
            style={{ color: "#ffffff" }}
          />
      </div>
    </div>
  );
}