반응형
CDN 사용 방법으로 작성
1. CDN 삽입
(Content delivery network 또는 content distribution network)
콘텐츠 전송 네트워크는 콘텐츠를 효율적으로 전달하기 위해
여러 노드를 가진 네트워크에 데이터를 저장하여 제공하는 시스템
＃버전 4 CDN (1과 2중 하나만 작성)
① https://cdn.fontawesome.com 접속
- email 작성하면 해당 메일로 CDN 발송
<script src="https://use.fontawesome.com/72aaf9ab20.js"></script> | cs |
② 구글 검색
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> | cs |
# 버전 5 CDN
① https://fontawesome.com/start 접속
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"> | cs |
※ head 태그 안에 CDN 작성
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- 버전4 CDN --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> <script src="https://use.fontawesome.com/72aaf9ab20.js"></script> <!-- 버전 5 CDN --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"> <title>font awesome</title> </head> | cs |
2. Font Awesome 아이콘 삽입
https://fontawesome.com/ 접속, 필요한 아이콘 검색
# 버전 4
- Version 4 just had one prefix — fa
<i class="fa fa-bluetooth-b"></i> <i class="fa fa-wifi"></i> | cs |
# 버전 5
<i class="fab fa-bluetooth-b"></i> <!-- <i class="fa fa-wifi"></i>도 가능 --> <i class="fas fa-wifi"></i> | cs |
※ 버전 5의 접두사는 버전 4보다 세분화
New Prefix |
Icon Style |
Availability |
fab |
Font Awesome Brands |
Free |
fas or fa |
Font Awesome Solid |
Free |
far |
Font Awesome Regular |
Pro only |
fal |
Font Awesome Light |
Pro only |
참고사이트▼
'CSS' 카테고리의 다른 글
| Clearfix Hack과 flow-root (0) | 2019.01.29 |
|---|---|
| media query (0) | 2019.01.03 |
| animations (0) | 2019.01.03 |
| pseudo-class (0) | 2019.01.03 |
| flexbox(Flexible Box module) (0) | 2018.12.29 |
댓글