React CSS 아이콘 라이브러리(fontawosome) 사용하기

CSS 줄 때 이런 식으로 아이콘 모양을 넣을 수 있다

그 방법 중 하나가 fontawesome이라는 라이브러리다

방법은 이러하다

npm i @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome

한 번에 설치가 안 되면 각각 따로 설치하면 된다

유료 아이콘도 있지만 유료는 사치다

무료 아이콘만 설치한다

---

fontawesome.com에 들어가서 Icon에 들어가면 아이콘 이름을 알 수 있다

유튜브 아이콘을 쓰려면 저걸 복사해서 붙이면 된다

그러나 저대로 복사해도 되지 않는다

fayouTube라는 아이콘을 쓰려면 아래와 같이 free-brands-svg-icons를 임포트해야 한다

다른 아이콘도 그에 맞는 곳에서 임포트해서 사용하면 된다

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faInstagram, faYoutube } from "@fortawesome/free-brands-svg-icons";

export const Icon = () => {
  return (
    <ul>
      <li>
        <FontAwesomeIcon icon={faInstagram} />
      </li>
      <li>
        <FontAwesomeIcon icon={faYoutube} />
      </li>
    </ul>
  );
};

 

---

이외에도 fontawesome.com 사이트에 가면 많은 아이콘 종류가 있다 

 

근데 사이트는 fontawesome인데 왜 임포트는 fortawesome이지??