HTML 페이지에 아이콘 추가하기: Font Awesome을 활용한 간편한 방법
Font Awesome을 사용하는 이유
웹 페이지나 애플리케이션에 아이콘을 추가하는 것은 사용자 경험을 향상시키고, 디자인적 요소를 강화하는 중요한 방법 중 하나입니다. 특히 Font Awesome과 같은 아이콘 라이브러리를 사용하면 다양한 아이콘을 쉽고 빠르게 웹 페이지에 통합할 수 있습니다. Font Awesome은 사용자가 필요로 하는 거의 모든 종류의 아이콘을 제공하며, CSS를 통해 쉽게 스타일을 변경할 수 있는 장점이 있습니다.
Font Awesome 아이콘 추가 방법
라이브러리 연결: 먼저, Font Awesome 라이브러리를 HTML 페이지에 연결해야 합니다. 이를 위해
<script>태그를 사용하며,src속성에 Font Awesome 키트의 URL을 넣어줍니다. 예를 들어,<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>와 같이 적용할 수 있습니다.아이콘 사용: 아이콘을 페이지에 추가하기 위해서는
<li>,<span>같은 인라인 태그 내에 특정 아이콘 클래스의 이름을 추가합니다. 예를 들어,<i class="fas fa-user"></i>와 같이 사용하면 사용자 아이콘이 페이지에 표시됩니다.스타일링: Font Awesome의 아이콘은 CSS를 통해 쉽게 스타일을 변경할 수 있습니다. 크기, 색상, 그림자 등을 CSS를 통해 사용자 정의할 수 있어, 디자인에 맞게 아이콘을 조정할 수 있습니다.
crossorigin 속성의 중요성
crossorigin 속성은 <audio>, <img>, <link>, <script>, <video> 태그에서 사용되며, 요소가 CORS(Cross-Origin Resource Sharing) 요청을 처리하는 방식을 지정합니다. 이 속성을 사용하면 외부 리소스를 불러올 때 CORS 정책을 준수하여 안전하게 데이터를 가져올 수 있습니다. 특히, 외부 서버에서 폰트나 스크립트를 불러올 때 이 속성이 중요하며, Font Awesome과 같은 라이브러리를 사용할 때도 이를 고려해야 합니다.
HTML 페이지에 아이콘을 추가하는 것은 사용자 인터페이스를 더욱 풍부하고 직관적으로 만들 수 있는 간단하면서도 효과적인 방법입니다. Font Awesome과 같은 아이콘 라이브러리를 사용하면 다양한 아이콘을 쉽게 추가하고, CSS를 통해 스타일링 할 수 있어 웹 페이지의 전반적인 디자인을 향상시킬 수 있습니다.
간단한 예시를 들어보자!
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>
<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>
</body>
</html>결과
부트스트랩 아이콘
부트스트랩 글리피콘을 사용하면 간단하게 아이콘을 추가할 수 있다.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
간단한 예시를 들어보자!
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-envelope"></i>
<i class="glyphicon glyphicon-thumbs-up"></i>
</body>
</html>결과
구글 아이콘
링크 추가
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
간단한 예시를 들어보자
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>
</body>
</html>