| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 |
- 웹
- es6
- 클라우드
- 리액트
- 컴퓨터공학
- 백준
- 이슈
- 타입스크립트
- kubernetes
- next.js
- node.js
- k8s
- 이더리움
- 프론트엔드
- HTML
- react
- 자바스크립트
- docker
- 가상화
- CSS
- 블록체인
- 백엔드
- AWS
- TypeScript
- 알고리즘
- BFS
- JavaScript
- 쿠버네티스
- 파이썬
- 솔리디티
- Today
- Total
즐겁게, 코드
페이지를 화사하게 - Font Awesome 사용하기 본문
웹 개발과 디자인은 뗄레야 뗄 수 없는 관계인데요, 이번에는 font-awesome을 활용해 간단하게 디자인을 꾸미는 방법을 알아보겠습니다.
Font Awesome
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.
fontawesome.com
Font Awesome(FA)은 수많은 아이콘을 자체 라이브러리뿐만 아니라 SVG, 유니코드 등 다양한 포맷으로 제공하는데요,
정말 다양한 종류의 아이콘을 무료로 제공할 뿐만 아니라 크기와 색상 등의 커스텀도 얼마든지 가능해 많은 사랑을 받고 있습니다.
CDN을 통해 아이콘 사용하기
(* 21년 2월 기준 FA 버전 6의 알파가 공개되었지만 아직은 Pro 라이센스를 보유해야만 사용이 가능해 이번에는 버전 5를 다루도록 하겠습니다.)
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css"
/>
FA는 CDN을 통해 간단히 불러올 수 있으며 압축 용량이 600 ~ 700바이트로 놀라울 만큼 작아 부담없이 사용할 수 있습니다.
이걸로 FA를 사용할 준비는 모두 끝났습니다!
아이콘 고르기
FA 웹사이트로 들어가면 상단 검색창에서 원하는 아이콘을 검색할 수 있습니다.
저는 리액트의 원자 아이콘이 마음에 들어 검색을 해 볼텐데요, 과연 있을까요?
다행스럽게도 있군요!
아이콘 목록에서 원하는 아이콘을 선택하면 아이콘 상세정보 화면으로 이동할 수 있습니다.
그러면 빨갛게 체크한 옵션 중에서 원하는 방식(SVG, 유니코드 등)으로 아이콘을 내려받을 수 있게 되는데요, 저는 <i> 태그를 활용하는 방식을 추천드립니다.
아이콘 사용하기
이제 리액트 아이콘을 HTML 문서에 추가해 볼까요?
<!DOCTYPE html>
<html lang="ko">
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css"
/>
</head>
<body>
<span>리액트 아이콘 :</span>
<i class="fab fa-react"></i>
</body>
</html>
아이콘이 나타난 모습입니다! 다만 아이콘이 조금 작은데 좋은 방법이 없을까요?
크기를 조절하기 위해서는 스타일의 font-size 값을 조정하거나 클래스명*을 추가해 FA 아이콘의 스타일을 지정할 수 있습니다.
(* 스타일링을 위한 클래스명은 굉장히 다양한데요, 클래스 문서 에 들어가면 다양한 효과를 부여하는 클래스들을 찾을 수 있습니다.)
<!DOCTYPE html>
<html lang="ko">
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css"
/>
</head>
<body>
<span>리액트 아이콘 :</span>
<i class="fab fa-react"></i>
<i class="fab fa-react fa-2x"></i>
<i class="fab fa-react fa-3x"></i>
<i class="fab fa-react" style = "font-size: 30px"></i>
</body>
</html>
아이콘의 색을 변경하기 위해서는 스타일의 color와 background 값을 조정해주면 됩니다.
뿐만 아니라 테두리와 패딩 등 일반적인 스타일 지정이 대부분 가능하니 입맛에 맛게 마음껏 꾸미면 됩니다.
마지막으로, 위에서 잠깐 언급한 대로 여러 클래스명을 활용해 신기한 효과를 구현할 수도 있습니다! 😁
<!DOCTYPE html>
<html lang="ko">
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css"
/>
</head>
<body>
<i class="fas fa-circle-notch fa-spin fa-3x"></i>
<i class="fas fa-cog fa-spin fa-3x"></i>
<i class="fas fa-spinner fa-pulse fa-3x"></i>
<i class="fas fa-sync-alt fa-spin fa-3x"></i>
</body>
</html>
아이콘을 활용하면 페이지를 훨씬 생동감있게 꾸밀 수 있으니, 적극적으로 활용해 웹을 화사하게 꾸며봅시다!
'🎨 프론트엔드' 카테고리의 다른 글
| 쿠키? 그거 먹는 건가요? (0) | 2021.02.15 |
|---|---|
| 웹 페이지 컨텐츠 복사 방지 구현하기 (0) | 2021.02.14 |
| HTML의 data- 속성에 대하여 (0) | 2021.02.13 |
| 웹 개발자는 무적이고, 에밋은 신이다 (0) | 2021.02.06 |
| Critical Rendering Path 에 대하여 (0) | 2021.01.31 |
