폰트 어썸5를 이용하여 html태그에 아이콘을 삽입하는 방법에 대하여 알아보자!
※ 폰트 어썸 홈페이지 이동하기
(fontawesome.com/icons?d=gallery)
1. CDN 적용하기 - all.min.css를 사용할 것
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet">
</head>
위처럼 html 의 <head> 안에 링크를 넣어주자.
vscode의 경우에는 index.html파일 내 head 안에 삽입하면 된다.
2. Free와 Solid 항목을 체크한 후, 검색창에 대략적인 아이콘 이름을 검색한다.
왼쪽 체크박스를 입력후 화면 중앙에 아이콘 이름을 입력하면 된다.
예를 들어, 더하기 모양의 아이콘을 입력하고 싶을 때는 plus라고 입력해주자.
3. 아이콘 아래에 있는 아이콘 이름을 복사 후, 복사한 이름을 아래 형식에 맞게 붙여넣기
<i class="fas fa-plus-square fa-2x"></i>fas-fa 다음에 복사한 아이콘 이름을 넣어주면 된다.
※ 아이콘은 일반적으로 <i> 태그를 많이 이용한다.
++ 추가적으로 알아두면 좋은 아이콘 다루기
1. 색상 변경
<span style="color:blue"><i class="fas fa-plus-square"></i></span>
2. 크기 변경
<i class="fas fa-plus-square fa-lg"></i> <!-- 33% 크기 -->
<i class="fas fa-plus-square fa-2x"></i> <!-- 2배 -->
<i class="fas fa-plus-square fa-3x"></i> <!-- 3배 -->
3. 크기 고정
<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i> Home</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i> Library</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i> Applications</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i> Settings</a>
</div>
4. 아이콘 방향 회전
<i class="fas fa-plus-square fa-rotate-90"></i>
<!-- 90도 회전 -->
<i class="fas fa-plus-square fa-rotate-180"></i>
<!-- 180도 회전 -->
<i class="fas fa-plus-square fa-rotate-270"></i>
<!-- 270도 회전 -->
<i class="fas fa-plus-square fa-flip-horizontal"></i>
<!-- 상하 반전 -->
<i class="fas fa-plus-square fa-flip-vertical"></i>
<!-- 좌우 반전 -->'vscode' 카테고리의 다른 글
| npm install 오류 (0) | 2021.04.13 |
|---|---|
| Vue CLI) firebase에 배포하기 (0) | 2021.02.09 |
| Vscode와 git 연동하기 (0) | 2021.02.03 |
| html) 이미지 삽입 방법- image url 링크 (0) | 2021.01.05 |
