Icon font generator/icomoon

coupang의 카테고리 영역과 같은 부분을 마크업하면서 img, svg를 사용하지 않고 쉽게 작업 할 수 있는 icon font generator를 알아보다가 icomoon이라는 사이트를 발견했다.

https://icomoon.io/app/#/select

import icons를 눌러서 본인이 가지고 있는 svg를 icon font로 만들 수도 있고 무료로 제공하는 icon font를 사용 할 수도 있다.

사용 방법은 위에서 아이콘을 선택한 후 하단에 Generator Font를 눌러서 font name이나 CSS Selector로 i를 사용할지 class를 사용할지를 선택한 후 다운로드를 받는다.

다운받은 파일은 작업중인 프로젝트에 style.css와 fonts 폴더를 옮겨준다.

style.css에서 src: url에 실제로 fonts 폴더가 있는 주소로 수정해주면 이제 사용 가능하다. 무료버전에서 font-style등의 수정이 어렵다는 점은 약간 아쉬운 부분이다.

완성!

후기.
html 마크업을 하면서 태그가 너무 길어지면 가독성도 떨어지고 답답한 부분이 있었는데 icon font라는 개념을 알게 되면서 많이 써먹을 수 있을 것 같다는 생각이 들었다.