FontAwesome 은 5000개 이상의 아이콘을 제공해주는 라이브러리로 Prefix와 name이 들어간 코드를 추가하여
간단하게 여러 아이콘을 무료로 사용할 수 있는 기능을 제공한다.
사용 방법
1. <html> 의 <head> 사이에 라이브러리를 다운받을 수 있는 링크를 추가한다.
|
1
2
3
4
5
6
7
|
<html>
...
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />
</head>
...
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
|
2. https://fontawesome.com/ 사이트에 접속하여 Icons 탭에서 원하는 아이콘을 선택한다.
3. 상단에 있는 코드 <i class="fas fa-airbnb"><i> 를 그대로 복사하여 내가 사용하고자 하는 위치에 붙여 넣기 하면 된다.
+ 추가 내용
1) 스타일 변경하기 - 태그에 스타일을 추가하여 크기나 컬러를 수정할 수 있다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<span style="font-size: 3em; color: Tomato;">
<i class="fas fa-camera"></i>
</span>
<span style="font-size: 48px; color: Dodgerblue;">
<i class="fas fa-camera"></i>
</span>
<span style="font-size: 3rem;">
<span style="color: Mediumslateblue;">
<i class="fas fa-camera"></i>
</span>
</span
?http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
|
2) Prefix에 대한 정보
그 외 자세한 내용은
https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use
반응형
'Java Script, HTML, CSS' 카테고리의 다른 글
| [Vue] 실행 모드(운영/개발)와 환경 변수 분리하기 (0) | 2022.04.21 |
|---|---|
| [클론코딩 요약/노마드코더] 바닐라 JS로 크롬 앱 만들기 - #2 PRACTICE (0) | 2021.02.09 |
| [클론코딩 요약/노마드코더] 바닐라 JS로 크롬 앱 만들기 - #1 THEORY (0) | 2021.02.04 |
| 자바스크립트 데이터 타입 정리 (0) | 2021.01.10 |
| CSS, HTML - gradient 색상 코드 사이트 (유용한 사이트) (0) | 2020.07.21 |
