라벨이 아이콘인 게시물 표시

아이콘을 폰트로 만들어 쓰기

이미지
부트스트랩, Angular 등을 하다보면 부수적이지만 자주 접하게 되는 것이 있습니다.
바로 font-awesome !! (http://fontawesome.io/)
각종 아이콘을 폰트로 만들어 css 만 임베딩하면 다양한 아이콘을 폰트처럼 쓸 수 있는 CSS Toolkit 입니다.

font-awesome 등 아이콘 검색하기 https://glyphsearch.com/
<i class="fa fa-bandcamp"></i>

이런 식으로 아이콘을 만들어 쓰면 우선 수십개의 아이콘을 CSS에서 색상, 크기 등을 코드 한줄로 자유롭게 수정할 수 있기 때문에 사용이 굉장히 편리하구요

이미지로 할 경우 padding, margin 주면서 복잡하게 레이아웃을 맞춰야하는데 폰트 기반이다 보니 아무래도 정렬 등도 덜 신경쓰면서 웹페이지를 만들 수 있어 좋습니다.

그런데 아무리 600가지가 넘는 아이콘을 font-awesome 에서 제공한다 하더라도 모든 디자인이 다 있지는 않아서.. 딱 관리자 페이지 만드는 정도에는 유용한 것 같습니다.

특별한 브랜드 디자인이 들어가거나, 특별한 이미지 아이콘이 필요한 상황에서는 그 이상이 필요합니다.

이번 아이프렌즈펫 쇼핑몰을 만들면서 강아지/고양이 용품 관련 특화된 아이콘들이 다수 필요했는데요, 관련 아이콘들은 기존에 폰트로 만들어져 제공되는 font-awsome 이나 line icon 등에서는 찾을 수 없었습니다.

그렇다고 모든 아이콘을 기존 방식대로 일일이 이미지로 만드는 작업은 저 혼자서 디자인, 코딩 모두를 짧은 시간 내에 해내야 하는 상황에서는 어려울 것 같았구요.

그래서 이미지를 폰트로 바꾸어주는 사이트가 없을까 해서 찾아봤는데 있었습니다 ^ㅁ^
여러 군데를 뒤져봤지만 이곳이 제일 편하더라구요



https://www.flaticon.com


1. 초간단 가입

가입을 안해도 되지만.. 찜한 아이콘을 관리하거나 다운받으려면 가입하는게 좋아요~



2. 원하는 아이콘 검색 (영문으로만 가능합니다^^)




3. …