아이콘은 애플리케이션에서 사용자가 수행할 수 있는 작업을 직관적으로 보여주는 데 매우 효과적인 요소입니다. 별도의 디자인 작업 없이 바로 가져다 쓸 수 있는 아이콘 라이브러리도 여럿 존재하는데, 그중 대표적인 곳은 다음과 같습니다.
- Font Awesome – https://fontawesome.com/
- Flaticon – https://www.flaticon.com/
- Material Design Icons – https://material.io/resources/icons/
물론 위에서 소개한 것보다 훨씬 더 많은 라이브러리가 있지만, 이 글의 목적은 그중 하나를 실제 프로젝트에 적용하고 CSS로 스타일을 제어하는 방법을 익히는 데 있습니다. 한 번 과정을 익혀두면 다른 라이브러리에서도 거의 비슷한 방식으로 활용할 수 있습니다.
Font Awesome 아이콘 라이브러리 시작하기
이번 글에서는 Font Awesome 아이콘 라이브러리를 사용해 보겠습니다. 아래 예제 코드에서 HTML 문서의 <head> 안에 있는 <link> 태그에 주목하세요. 이것은 Font Awesome의 아이콘 라이브러리를 참조하는 경량화(minified)된 CSS 파일입니다. '경량화'란 공백과 줄바꿈 같은 불필요한 서식을 모두 제거했다는 의미입니다.
이 콘텐츠 전송 네트워크(CDN) 링크를 <head>에 넣어두기만 하면 Font Awesome의 무료 라이브러리 대부분에 접근할 수 있습니다. SVG 라이브러리 역시 존재하지만, 이는 JavaScript를 다룰 때 자세히 살펴보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Icons</title>
<style>
.icon-container {
font-size: 24px;
}
.fab {
font-size: 3rem;
color: #1DA1F1;
}
.fa-heart {
font-size: 4rem;
color: crimson;
}
</style>
</head>
<body>
<!-- Icons will go here -->
<div class="icon-container">
<i class="fab fa-twitter"></i>
<span class="fas fa-camera"></span>
<span class="fas fa-heart"></span>
</div>
</body>
</html>
아이콘 마크업 작성 방법
위 코드의 body 부분을 보면 <i>와 <span>, 두 가지 인라인 요소가 사용된 것을 확인할 수 있습니다. 두 방식 모두 마크업에서 아이콘을 표현하는 유효한 방법입니다. 필자의 경험상 <i> 태그가 가장 널리 쓰이며, 드물게 <span>이 사용되는 경우도 있습니다.
또한 요소의 내용이 비어 있다는 점에 주목하세요. class 속성을 통해 head에 삽입한 CSS 파일을 이용해 Font Awesome 라이브러리에서 필요한 아이콘을 불러오는 것입니다.
CSS 파일을 직접 열어 내용을 확인해볼 수도 있습니다. 다만 텍스트가 빽빽하게 나열되어 있어 다소 부담스러울 수 있습니다. 그래도 이 파일 안에는 무료 아이콘을 프로젝트에 삽입하는 데 필요한 모든 정보가 담겨 있다는 점만 기억하면 됩니다.
클래스 이름의 구조: 스타일 접두사와 아이콘 이름
아이콘의 클래스 이름은 '스타일 접두사'와 '아이콘 이름', 두 부분으로 구성됩니다. 위 예제에서는 "fab"과 "fas"가 사용되었습니다. 여기서 "fa"는 Font Awesome을, "b"는 브랜드(brand)를, "s"는 솔리드(solid) 스타일을 의미합니다. 그 밖에도 여러 접두사가 존재하지만, 해당 스타일을 사용하려면 PRO 계정이 필요합니다.
아이콘 이름은 Font Awesome 웹사이트의 아이콘 갤러리에서 확인할 수 있으며, 일반적으로 "fa-<아이콘 이름>" 형식의 명명 규칙을 따릅니다.
CSS로 아이콘 스타일링하기
아이콘은 스타일을 적용하거나 페이지 내 위치를 제어할 때 인라인 요소처럼 취급해야 합니다. Font Awesome 아이콘 스타일링에 대한 자세한 내용은 공식 문서를 참고하세요. 문서가 매우 명확하게 정리되어 있어 문서 읽기 연습에도 좋습니다. CSS를 활용한 스타일링 예시는 위 에디터 코드에 이미 포함되어 있습니다.
샌드박스 환경에서 자유롭게 아이콘을 실험하고 원하는 스타일을 입혀 보세요!