[basic] BS4 - Icon (BS아이콘)

목차

1. 폰트오썸 아이콘
2. 구글 아이콘

※ BS4는 Glyphicon 지원 X

※ BS4는 fontawesome 또는 google 아이콘 사용.

※ 그누보드 5.4 버전: /js/font-awesome/* (4.7.0 버전)

폰트오썸 아이콘

1.

폰트오썸 외부링크를 head 태그 안에 삽입.

※ 아래 4가지 방식 중 편한 방법 택일.

[CDN 방식]

 

JS 방식

<script src="https://use.fontawesome.com/releases/v5.12.0/js/all.js"></script>

 

CSS 방식

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">

또는,

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">

 

---

[다운 방식]

※ 업로드한 경로에 맞게 알맞게 주소 수정

 

JS 방식

<script defer src="js/all.min.js"></script>

 

CSS 방식

<link rel="stylesheet" href="css/all.min.css">

 

2.

아이콘 출력코드 예제

 

<i class="fas fa-heart"></i> 

<i class="fas fa-cloud"></i>

<i class="fas fa-coffee"></i>

<i class="fas fa-car"></i>

<i class="fas fa-file"></i>

<i class="fas fa-bars"></i>

 

구글 아이콘

1. head 쪽에 아래 코드 추가

 

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

 

---

2. 출력 위치에 아래 코드 추가

 

<i class="material-icons">cloud</i>

<i class="material-icons">computer</i>

결과보기

※ style 속성 이용해 스타일 수정 가능.