UL/Lists 에 Custom Bulllets를 세팅하는 방법

먼저 아래와 같은 HTML 코드가 있다고 가정하면,

<div id=newlist><ul>
<li>첫번째 리스트입니다.</li>
<li>두번째 리스트입니다.</li>
<li class=othercheck>클래스를 다르게 지정한 리스트입니다.</li>
</ul></div>

먼저, 기존 불릿을 감추고 :before를 사용해서 새로운 불릿을 만들어 보겠습니다.

#newlist ul {
  list-style: none;
}
//* standard Unicode method *//

#newlist ul li:before {
content: "\2713";
color:#3740ff;
padding-right:5px;
}

//* if you use FA5 *//
#newlist ul li:before {
font-family: "Font Awesome 5 Free"; 
font-weight: 900;
content: "\f14a";
color:#3740ff;
padding-right:5px;
}

#newlist .othercheck:before {
font-family: "Font Awesome 5 Free"; 
font-weight: 900;
content: "\f4da";
color:#3740ff;
padding-right:5px;
}