[TIL] Icon Font Generator를 사용하여 svg 이미지를 iconfont로 변환해보자

💥 Icon Font 란?

SVG 기반의 Vector 그래픽을 Font 파일화 하여 CSS를 통해서 Icon을 사용하는 방식으로,
수많은 이미지 아이콘을 관리해야 하는 방법과 다르게 단순히 Font 파일과 CSS만 관리하면 된다.

대표적으로는 Material-Icon, FontAwesome 이 있으며, 그 외 여러 프레임워크에서 자체 Icon Font를 지원하기도 함.

 

지난 5년 동안 FontAwesome의 관심도가 Material-Icon보다 더 높은 것을 볼 수 있음.

---

👍 Icon Font 장점

1. 하나의 글꼴 파일에 다양한 아이콘을 넣어두고 사용

2. CSS로 확장하여 모든 작업이 가능

3. Vector Graphic이기 때문에 크기 변형에 제한이 없음

4. Unicode 또는 Ligature 사용

5. 전체 서체보다 적은 문자를 포함하여 파일의 크기가 작음

 

👎 Icon Font 단점

다양한 색상의 Icon 표현 불가

Icon Font 자체만 놓고 보았을 때는 Font 파일이기 때문에,
Font 파일의 글꼴은 색상 정보가 포함되어 있지 않아 여러 색상을 가진 Icon Font를 생성할 수 없다.

여러 글리프를 색상별로 분리해 놓고 하나로 겹쳐 하나의 폰트처럼 보일 수 있지만
이렇게 하면 아이콘 제작에 많은 시간을 투자하게 되기 때문에 효율적이지 않다.

글리프란? 정보 기술에서, 기호의 형태를 체계적으로 표현하기 위하여 고안한 그래픽 부호.

---

 

💫 Icon Font 사용 방법

그렇다면, 이제 사용을 해보자!

내가 구현한 Icon Font는 쿠팡 사이트 카테고리의 일부분으로, 각 카테고리의 맨 왼쪽 이미지들이 icon font 인 것!!

---

1. Icon Font 생성도구 이용

Icon Font를 가장 쉽게 만들 방법은 도구를 사용하는 것으로,
이미 상용화된 소스들이 많을뿐더러 SVG만 있다면 누구나 SVG를 통하여 Icon Font로 제작할 수 있음.
대표적인 도구로는 IcoMoon, Glyphter, Fontello가 있고, 웹 페이지에 SVG를 업로드하면 Font 파일로 변환하여 다운로드할 수 있다.

나는 IcoMoon을 이용하여 Icon font를 생성해보겠다.
https://icomoon.io/app/#/select/font

IcoMoon App - Icon Font, SVG, PDF & PNG Generator

---

2. 갖고 있는 svg파일들 import

나의 경우에는 이미 갖고 있는 svg 파일이 있었기에, 해당 파일을 불러와서 사용할 예정.

사이트를 방문하여, import Icons 버튼을 클릭하고, icon font 생성을 원하는 파일들을 불러온다.

나의 경우 file명이 baby인 svg를 누르면, 오른쪽의 svg로 된 이미지들이 개별로 저장되어 있는 파일들이다.

svg 파일들을 갖고 있지 않더라도, icon library를 통해서 원하는 모양의 아이콘을 선택할 수 있다.

---

3. 파일 import & 설정

파일들을 불러오면, 아래와 같이 리스트업 된다.

사이트 맨 아래쪽의 Generate Font 버튼을 누르고,

icon명을 변경하고 싶다면, 원하는 title을 넣으면 된다.

---

또한 아래의 빨간 박스로 표시되어 있는 설정 버튼을 클릭하여 디테일한 속성들을 세팅할 수 있다.
첫 번째 파란 박스) 생성할 때 지정할 폴더명.
두 번째 파란 박스) 클래스명 앞에 넣을 title. ex) ic-baby, ic-book
네 번째 파란 박스) i tag로 생성.

설정한 후, 다운로드 버튼을 클릭하면 icon font 생성 완료!

---

4. 내 프로젝트에 적용

압축되어 있는 파일을 풀고 나서 style.css라는 파일을 내 프로젝트에 가져온다.

그리고, 올바른 url로 설정하였는지 확인한다.

style.css 파일의 코드 아래쪽에 보면 다운로드 전에 설정했던 클래스명이 적혀있는데,
그 클래스명을 html 파일에 가져오면 해당 icon font가 제대로 작동하는 것을 볼 수 있다!

 

 

---

https://www.youtube.com/watch?v=lqEWDEY4V6M

https://kdydesign.github.io/2020/08/25/web-icon-font/

Web Icon Font 제작 방법을 배워보자!

https://triplexlab.tistory.com/52

Icon Font 정리