벡터이미지인 SVG 이미지를 반응형이나 모바일에서 많이 쓰이는데
자주 쓰이는 아이콘 이미지를 웹폰트화 하기 위한 방법을 서술한다.
1. 먼저 path가 묶여지지 않은 벡터 이미지를 svg 이미지로 다운을 받는다.
path가 묶여진 채로 svg를 다운받으면 오류가 난다.
2. 아래 사이트에서 우측 상단의 IconMoon App 버튼을 클릭한다.
Icon Font & SVG Icon Sets ❍ IcoMoon
About IcoMoon is striving to build and provide the best iconography and icon management tool for perfectionists. IcoMoon's icon library features only the very best icon sets out there. All of our icons are designed on a precise pixel grid. The IcoMoon app
icomoon.io
3. svg 파일을 import 한다.
4. 파일을 선택 후, 오른쪽 하단의 버튼을 클릭한다.
5. 다운받은 압축 파일의 압축을 풀어 사이트에 적용시킨다.
압축 폴더 내에는 변환되어진 폰트들과 css가 들어있다.
이를 사이트에 맞게 적용시키면 color, font-size 값으로 웹폰트화 한 아이콘을 마음대로 변경할 수 있게 된다.
아이콘들을 이런식으로 웹폰트화 해두면 유지보수가 편하게 작업 가능해진다.
* 좋아요와 댓글은 힘이 됩니다. :)
'Publish > CSS' 카테고리의 다른 글
| 안드로이드 모바일 자동 조절 폰트 (0) | 2021.06.30 |
|---|---|
| 요새 많이 쓰이는 단위 정리 (vh/vw/calc) (0) | 2021.06.30 |
| css만으로 탭 구성 하기 (0) | 2021.06.30 |
| 멀티라인 말줄임과 폴백(fallback) CSS (0) | 2021.06.30 |
| IE 브라우저에서 table-cell 에 position:relative 를 쓸 경우. (0) | 2021.06.30 |
