목차
폰트오썸 아이콘
구글 아이콘
※ 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 속성 이용해 스타일 수정 가능.
주소 복사
랜덤 이동