[HTML & CSS ] Font Awesome 사용법!

1. 내용

웹사이트를 개발하다 보면 아이콘을 자주 사용하게 됩니다.
버튼, 네비게이션 바, 소셜 미디어 링크 등 다양한 요소에서 아이콘은 사용자 경험을 향상시키는 중요한 역할을 합니다.
하지만 직접 아이콘을 만들거나 이미지 파일을 사용하는 것은 번거롭고 유지보수가 어렵습니다.
이때 Font Awesome이 등장합니다!

Font Awesome은 웹사이트에서 아이콘을 쉽게 사용할 수 있도록 제공하는 오픈소스 아이콘 라이브러리로, 간편한 사용법과 다양한 기능 덕분에 많은 개발자가 애용하고 있습니다.

2. Font Awesome 주요 특징

2-1. 방대한 아이콘 컬렉션

Font Awesome은 수천 개의 아이콘을 제공하며, 무료(FREE) 및 유료(PRO) 버전으로 나뉩니다.
소셜 미디어, UI 요소, 브랜드 로고 등 다양한 카테고리의 아이콘을 쉽게 활용할 수 있습니다.

2-2. 벡터 기반 (SVG & Web Font)

이미지 파일이 아닌 벡터 형식으로 제공되기 때문에 확대/축소를 해도 깨지지 않으며, CSS를 이용해 크기, 색상 등을 자유롭게 조정할 수 있습니다.

2-3. 간편한 사용법

HTML, CSS, JavaScript를 이용해 간단한 코드만으로 아이콘을 삽입할 수 있습니다.
CDN, npm, 직접 다운로드 등 다양한 방식으로 프로젝트에 적용할 수 있어 유연성이 뛰어납니다.

2-4. 다양한 프레임워크 지원

Font Awesome은 Bootstrap, React, Vue.js, Angular 등 다양한 프레임워크와 호환됩니다.
어떤 환경에서든 쉽게 적용할 수 있습니다.

3. Font Awesome

3-1. 회원가입

Start for Free를 클릭합니다.

이메일 주소를 입력합니다.
서비스 약관 및 개인 정보 보호 정책에 동의를 합니다.
Send Kit Embed Code를 클릭합니다.

메일이 발송된 것을 확인합니다.

발송된 메일에서 Finish Setting Up Your Account를 클릭합니다.

Password를 입력합니다.
Password 확인을 입력합니다.
Start Password & Continue를 클릭합니다.

이름을 입력합니다.
성을 입력합니다.
All set Let’s go를 클릭합니다.

사용하시려는 Style을 선택합니다.
Next를 클릭합니다.

아이콘을 어떻게 사용할지를 선택합니다.
Next를 클릭합니다.

Make My Kit을 클릭합니다.

3-2. 설정

생성된 코드를 복사합니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script
      src="<https://kit.fontawesome.com/XXXXXXXXX.js>"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

<body> 제일 아래 복사한 코드를 추가합니다.

3-3. 사용

사용하시려는 icon을 선택합니다.

해당 문구를 클릭하여 복사합니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <i class="fa-solid fa-user"></i>
    <script
      src="<https://kit.fontawesome.com/XXXXXXXXX.js>"
      crossorigin="anonymous"
    ></script>
  </body>
</html>