Font Awesome는 다양한 벡터 기반 아이콘을 제공하는 무료 아이콘 폰트 및 CSS 프레임워크입니다. 웹 개발자들은 이를 통해 간편하게 다양한 아이콘을 웹 페이지에 추가할 수 있습니다.
Font Awesome를 사용하는 목적
- 아이콘은 웹 페이지에 시각적 요소를 추가하고 사용자 경험을 향상시키는 데 사용됩니다.
- Font Awesome는 벡터 기반으로 제공되어 해상도에 상관없이 선명하게 표시됩니다.
Font Awesome의 장점
- 다양한 아이콘: Font Awesome는 7,000개 이상의 아이콘을 제공하며, 여러 카테고리와 스타일을 지원합니다.
- 벡터 기반: 확대 또는 축소 시에도 깨지지 않고 선명하게 표시됩니다.
- 쉬운 사용: 간단한 HTML 및 CSS 코드로 손쉽게 적용할 수 있습니다.
Font Awesome의 단점
- 파일 크기: 모든 아이콘을 불러오는 경우 초기 페이지 로딩 시에 파일 크기가 커질 수 있습니다.
Font Awesome의 사용방법
공식 사이트 : https://fontawesome.com/
1. 라이브러리 추가:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha384--KpQFIBV5GO9SUVyH6uGfMz/CGm/Z2n8q+eaqL3PE9EyY1HG8o/Wnbj3+ddjMmk6p" crossorigin="anonymous">
2. 아이콘 삽입:
필요한 곳에 아이콘을 삽입합니다. 클래스 이름을 통해 원하는 아이콘을 선택합니다.
<i class="fas fa-heart"></i>여기서 fas는 아이콘 스타일을 지정하고, fa-heart는 하트 아이콘을 나타냅니다.
3. 예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Font Awesome CSS 파일 추가 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha384--KpQFIBV5GO9SUVyH6uGfMz/CGm/Z2n8q+eaqL3PE9EyY1HG8o/Wnbj3+ddjMmk6p" crossorigin="anonymous">
<!-- 사용자 지정 CSS 스타일 -->
<style>
/* 좋아요 버튼 스타일 */
.like-button {
font-size: 24px; /* 아이콘 크기 설정 */
color: #e74c3c; /* 아이콘 색상 설정 */
cursor: pointer; /* 커서를 포인터로 변경하여 클릭 가능한 상태로 표시 */
}
</style>
<title>Font Awesome 예제</title>
</head>
<body>
<!-- 좋아요 버튼을 클릭하면 toggleLike 함수 실행 -->
<div class="like-button" onclick="toggleLike()">
<!-- 초기에는 빈 하트 아이콘(far)으로 시작 -->
<i id="heart-icon" class="far fa-heart"></i> Like
</div>
<!-- JavaScript 코드 -->
<script>
function toggleLike() {
// 하트 아이콘 요소를 가져옴
const heartIcon = document.getElementById('heart-icon');
// 아이콘의 클래스를 토글하여 상태 전환
heartIcon.classList.toggle('fas');
heartIcon.classList.toggle('far');
// 추가적인 애니메이션 클래스를 토글하여 효과 부여
heartIcon.classList.toggle('animated');
heartIcon.classList.toggle('heartBeat');
}
</script>
</body>
</html>이 코드를 실행하면 좋아요 버튼을 클릭할 때마다 하트 아이콘의 상태가 변경되면서 애니메이션이 적용될 것입니다.
'developer > html css' 카테고리의 다른 글
| 시맨틱 웹과 HTML5: 의미론적 태그로 더 나은 웹 구축하기 (0) | 2024.02.05 |
|---|---|
| CSS Reset에 대한 이해: reset.css의 필요성과 사용법 (0) | 2024.02.01 |
| HTML '<a>'태그 : 하이퍼링크 생성과 활용 (0) | 2024.01.31 |
| CSS는 무엇인가? (0) | 2024.01.22 |
| html은 무엇일까? (0) | 2024.01.21 |
