<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>아이콘 사용하기</title>
<!-- css 파일을 불러오는 코드 -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<link rel="stylesheet" type="text/css" href="commons.css">
<link rel="stylesheet" type="text/css" href="test.css">
<style>
/*
글자 색상과 관련된 클래스
- 아이콘에도 사용 가능
*/
.red { color: #d63031; }
.blue { color:#0984e3; }
.yellow { color:#fdcb6e; }
.green { color:#00b894; }
.gray { color:#b2bec3; }
.black { color:#2d3436; }
.white { color:#FFF; }
</style>
</head>
<body>
<div class="container w-500">
<div class="row">
<h1>아이콘 예제</h1>
</div>
<div class="row">
<i>원래 용도는 italic 글자체 작성1</i>
</div>
<div class="row">
<i class="fa-brands fa-instagram"></i>
<i class="fa-brands fa-facebook"></i>
<i class="fa-brands fa-youtube"></i>
<i class="fa-brands fa-google"></i>
</div>
<div class="row">
<i class="fa-solid fa-gear"></i>
<span class="fa-solid fa-gear"></span>
<!-- fa-?x 클래스로 크기를 변경할 수 있다(10배까지) -->
<i class="fa-solid fa-gear fa-2x"></i>
<i class="fa-solid fa-gear fa-3x"></i>
<i class="fa-solid fa-gear fa-4x"></i>
<!-- <i class="fa-solid fa-gear fa-5x"></i> -->
<!-- <i class="fa-solid fa-gear fa-6x"></i> -->
<!-- <i class="fa-solid fa-gear fa-7x"></i> -->
<!-- <i class="fa-solid fa-gear fa-8x"></i> -->
<!-- <i class="fa-solid fa-gear fa-9x"></i> -->
<!-- <i class="fa-solid fa-gear fa-10x"></i> -->
</div>
<!-- 색상 변경이 가능하다(color) -->
<div class="row">
<i class="fa-solid fa-asterisk red"></i>
<i class="fa-solid fa-asterisk blue"></i>
<i class="fa-solid fa-asterisk gray"></i>
<i class="fa-solid fa-asterisk black"></i>
<i class="fa-solid fa-asterisk yellow"></i>
<i class="fa-solid fa-asterisk green"></i>
</div>
<!-- 애니메이션 설정 가능 -->
<div class="row">
<i class="fa-solid fa-spinner fa-2x"></i>
<i class="fa-solid fa-spinner fa-2x fa-spin"></i>
<i class="fa-solid fa-heart fa-2x fa-beat red"></i>
<i class="fa-regular fa-heart fa-2x fa-beat red"></i>
</div>
</div>
</body>
</html>
'CSS' 카테고리의 다른 글
| 2차 메뉴에 대한 디자인 구현 (0) | 2023.08.29 |
|---|---|
| 폰트 어썸을 이용해보자! (2개다 사용해볼것) (0) | 2023.08.28 |
| 선택자(selector) (0) | 2023.08.25 |
| html 인라인 태그 (0) | 2023.08.23 |
| html 인라인 스타일 (0) | 2023.08.23 |