fontawesome 아이콘 넣기

1. 자바스크립트 CDN을 이용하는 방법

    head 태그에 추가 합니다.

5.x 버전

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

 

2. CSS CDN을 이용하는 방법

4.x 버전

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

5.x 버전

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

 

사용예

<h1><i class="fas fa-camera-retro"></i></h1>

 

체크박스에 적용예

# CSS
label.bb:before {
  content: "\f0c8";
  font-family: "Font Awesome 5 Free";
  margin-right: 10px;
  color: #cccccc;
  font-size: 24px;
}
input#aa:checked + label.bb:before {
  content: "\f14a";
  color: #000000;
}
input#aa {
  display: none;
}
      
# HTML
<div>
      <input type="checkbox" id="aa">
      <label for="aa" class="bb"></label>
      <label for="aa" class="cc">Lorem Ipsum Dolor</label>
</div>