[CSS] 아이콘 사용 방법: 폰트 어썸(Font Awesome)

소요 시간: 2분 조회수: 152

아이콘은 현대 웹 디자인에서 중요한 요소 중 하나입니다. 아이콘을 통해 사용자에게 직관적이고 시각적인 정보를 제공할 수 있습니다. 이번 글에서는 대표적인 아이콘 라이브러리인 폰트 어썸(Font Awesome)을 이용해 아이콘을 웹 페이지에 쉽게 추가하는 방법을 알아보겠습니다. 폰트 어썸을 사용하면 수많은 아이콘을 간단하게 웹 페이지에 적용할 수 있으며, CSS만으로 아이콘의 크기와 색상 등을 조정할 수 있어 매우 유용합니다.


폰트 어썸(Font Awesome)이란?

폰트 어썸(Font Awesome)은 인터넷에서 가장 인기 있는 아이콘 라이브러리 중 하나로, 디자이너와 개발자, 콘텐츠 제작자들에게 폭넓게 사용되고 있습니다. 무료 버전과 유료 버전이 있으며, 무료 버전만으로도 1588개의 아이콘을 제공하므로 대부분의 경우 충분히 활용할 수 있습니다. 유료 버전에서는 7842개의 아이콘을 제공합니다.

폰트 어썸의 가장 큰 장점은 CSS만으로 아이콘의 크기, 색상, 회전 등을 조절할 수 있다는 점입니다. 이러한 개인화 기능 덕분에 사용자 요구에 맞춰 아이콘을 쉽게 커스터마이즈할 수 있습니다.


폰트 어썸 라이브러리 세팅하기

먼저, 폰트 어썸의 아이콘을 사용하려면 라이브러리를 HTML 파일에 추가해야 합니다. 다음은 폰트 어썸을 설정하는 단계별 가이드입니다.

폰트 어썸 가입

  1. 폰트 어썸 사이트 접속: 폰트 어썸 홈페이지에 접속하여 메인 화면 중앙에 있는 'Start for Free' 버튼을 클릭합니다.
  2. 이메일 등록: 등록 페이지에서 이메일 주소를 입력하고 'Send Kit Code' 버튼을 클릭합니다.
  3. 이메일 인증: 자신의 이메일 함에서 폰트 어썸이 보낸 메일을 확인하고, 메일에 포함된 링크를 클릭해 인증 절차를 완료합니다.
  4. 계정 설정: 비밀번호를 설정하고 이름, 폰트 어썸을 시작한 년도 등의 추가 정보를 입력합니다. 필요 시 '건너뛰기' 버튼을 클릭해 이 단계를 생략할 수 있습니다.
  5. Kit 코드 복사: 계정 설정이 완료되면 Kit 코드가 제공됩니다. 이 코드를 복사합니다.
  6. HTML 파일에 Kit 코드 추가: HTML 파일을 열어 <head> 태그 안에 복사한 Kit 코드를 붙여넣습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <!-- 복사한 Kit 코드 추가 -->
    <script src="https://kit.fontawesome.com/yourkitcode.js" crossorigin="anonymous"></script>
</head>
<body>
    <!-- 본문 내용 -->
</body>
</html>


아이콘 추가하기

이제 폰트 어썸을 통해 웹 페이지에 아이콘을 추가하는 방법을 알아보겠습니다.

  1. 아이콘 검색: 폰트 어썸 홈페이지에서 원하는 아이콘의 이름을 입력하여 검색합니다.
  2. 아이콘 스타일 선택: 검색 결과에서 원하는 아이콘 스타일을 클릭합니다.
  3. i 태그 복사: 선택한 아이콘의 상세 페이지에서 <i> 태그를 복사합니다.
  4. HTML 파일에 아이콘 추가: HTML 파일에서 아이콘을 추가하고 싶은 위치에 복사한 <i> 태그를 붙여넣습니다.
<div>
    <i class="fa-brands fa-instagram"></i>
</div>


아이콘 스타일링

폰트 어썸 아이콘은 CSS를 사용하여 다양한 스타일을 적용할 수 있습니다. 예를 들어, 아이콘의 크기와 색상을 변경하려면 다음과 같이 CSS를 작성합니다.

/* 아이콘의 크기 변경 */
.fa-instagram {
    font-size: 40px;
}

/* 아이콘의 색상 변경 */
.fa-instagram {
    color: #E1306C;
}

이렇게 간단한 CSS 코드를 통해 아이콘을 원하는 대로 커스터마이즈할 수 있습니다. 아이콘 크기, 색상뿐만 아니라 회전, 그림자 등 다양한 스타일링 옵션이 가능하므로 창의적인 디자인을 구현할 수 있습니다.


결론

폰트 어썸은 간편하게 아이콘을 웹 페이지에 추가하고 스타일링할 수 있는 강력한 도구입니다. 무료로 제공되는 수많은 아이콘을 활용해 웹 페이지의 시각적 요소를 강화하고, CSS를 통해 아이콘을 자유롭게 커스터마이즈해보세요. 폰트 어썸을 활용하면 웹 디자인의 품질과 효율성을 크게 높일 수 있을 것입니다.

인기글

CSS 리스트