![[CSS] Icommon 사용 방법](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FboV4LF%2Fbtrw44R0Qxt%2Fmnw79NOSk8V3vwA14MR8MK%2Fimg.png)
728x90
1. icommon
이번에는 회사 프로젝트에서 icommon을 사용하고 있어서 https://icomoon.io의 사용법을 간단히 정리한다.
들어가자 마자 위의 icoMoonApp버튼을 누르면 아래와 같은 화면이 나타난다.
icomoon에서 무료로 제공하는 아이콘들이 보이면 위에 파란색으로 표시 되어있는 집 모양 세가지를 선택한 후, 아래의 빨간색으로 표시되어있는 Generate Font를 눌러보자.
그리고 나서 바로 다운로드를 요청해보자. icomoon.zip이 다운로드가 될텐데, 압축을 해제해 보면, 아래의 폴더 및 파일들이 있다. 아래에서 중요한 것은 font 폴더와 style.css이다. (실제로 사용하는 파일)
demo-files
fonts (폰트가 들어있는 파일)
demo.html (아이콘 확인을 위한 데모페이지)
Read Me.txt (주석 및 관련 내용)
selection.json
style.css (아이콘 폰트를 불러오는 class 선언파일)
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css"></head>
</head>
<body>
<span class="icon-home"></span>
<span class="icon-home2"></span>
<span class="icon-home3"></span>
</body>
</html>
위와 같이 코드를 작성 하고 확인을 해보면, 아래와 같이 import했던 아이콘들을 볼 수 있다.
728x90