장난감 프로젝트를 만들다 보면, 아이콘이 필요한 경우가 있다. 간단하게 아이콘을 인터넷에서 검색하여, 이미지로 넣어두고 이미지 태그를 이용하여, 사용하는 경우가 일반적이였지만...
요즘에는 대부분 폰트를 이용하여 아이콘을 노출 한다. 나 같은 경우에도 기본적으로 https://material.io/resources/icons를 참고하여 아이콘 폰트를 이용할 수 있도록 처리하고, 추가적으로 필요한 아이콘이고, 일상적으로 사용 되지 않는 아이콘의 경우에는 https://icomoon.io에서 제작하여, 아이콘 폰트로 이용 하곤 한다.
그래서 이번에는 아이콘 https://icomoon.io의 사용법을 간단히 공유하고자 한다.
들어가자 마자 위의 icoMoonApp버튼을 누르면 아래와 같은 화면이 나타난다.
icomoon에서 무료로 제공하는 아이콘들이 보이면 위에 파란색으로 표시 되어있는 집 모양 세가지를 선택한 후, 아래의 빨간색으로 표시되어있는 Generate Font를 눌러보자.
그리고 나서 바로 다운로드를 요청해보자. icomoon.zip이 다운로드가 될텐데, 압축을 해제해 보면, 아래의 폴더 및 파일들이 있다. 아래에서 중요한 것은 font 폴더와 style.css이다.
demo-files
fonts
demo.html
Read Me.txt
selection.json
style.css
<!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했던 아이콘들을 볼 수 있다.
댓글
댓글 쓰기