CSS 아이콘 폰트의 이해와 활용
페이지 정보
조회 1회 작성일 26-02-26 00:39
본문
아이콘 폰트의 이해와 활용
1. 아이콘 폰트란?
개념: 일반적인 글자 대신 화살표, 체크 표시, SNS 로고 등 다양한 아이콘을 글꼴 파일 안에 담아낸 것입니다.
특징: 이미지 파일(PNG, JPG)이 아니므로 CSS의
font-size로 크기를 조절하고,color속성으로 색상을 자유롭게 바꿀 수 있습니다.
2. 아이콘 폰트의 장점
용량 절약: 여러 개의 아이콘 이미지를 개별적으로 불러오는 것보다 하나의 폰트 파일을 불러오는 것이 로딩 속도 면에서 효율적입니다.
해상도 독립성: 벡터(Vector) 방식이므로 화면을 아무리 확대해도 깨지지 않고 선명하게 보입니다.
편리한 스타일링: 일반 텍스트처럼 그림자(
text-shadow), 회전, 애니메이션 효과를 CSS만으로 간단히 적용할 수 있습니다.
3. 대표적인 아이콘 폰트 서비스
Font Awesome: 가장 세계적으로 많이 사용되는 라이브러리입니다.
Google Material Icons: 구글에서 제공하는 깔끔하고 직관적인 시스템 아이콘 모음입니다.
Bootstrap Icons: 부트스트랩 프레임워크와 잘 어울리도록 설계된 무료 아이콘 세트입니다.
4. 사용 방법 (Font Awesome 기준)
연결:
<head>태그 안에 해당 서비스의 CDN 링크를 넣거나 파일을 연결합니다.호출: 정해진 클래스명(예:
fa-solid fa-user)을 가진<i>태그나<span>태그를 삽입합니다.수정: CSS에서
.fa-user { color: blue; font-size: 24px; }처럼 스타일을 지정합니다.
대표적인 아이콘 폰트 서비스
1. Font Awesome (가장 대중적)
가장 방대한 아이콘 라이브러리를 보유하고 있으며, 무료 버전만으로도 충분히 다양한 아이콘을 사용할 수 있습니다.
2. Google Material Symbols & Icons (깔끔한 스타일)
구글에서 제공하며 안드로이드나 구글 서비스에서 보는 친숙하고 직관적인 아이콘들이 많습니다.
3. Bootstrap Icons (무료/오픈소스)
부트스트랩 프레임워크와 완벽하게 호환되며, 모든 아이콘이 무료로 제공됩니다.
4. Line Awesome (폰트어썸 대체)
Font Awesome과 동일한 클래스명을 사용하면서도 선(Line) 중심의 세련된 디자인을 무료로 제공합니다.
HTML <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" integrity="sha512-2SwdPD6INVrV/lHTZbO2nodKhrnDdJK9/kg2XD1r9uGqPo1cUbujc+IYdlYdEErWNu69gVcYgdxlmVmzTWnetw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
HTML <i class="fa-whiteboard fa-semibold fa-alarm-clock"></i> |
- 이전글CSS List 속성 정리 26.02.26
- 다음글웹폰트(Web Font)의 이해와 사용법 26.02.26