Font Icon 이란? 만드는 방법 공유

Font Icon

아이콘을 사용할 때 보통 png파일이나 gif파일을 사용하는 경우가 있는데, 이번에는 색다른 것을 발견하여 공유합니다.

font icon 이라는 것인데 이미지를 사용했을 때 보다 더 좋은 점은 키기와 색상을 마음껏 조절 할 수 있다는 점이다.디자이너가 한 이미지의 색깔과 크기를 변경해서 주는 것이 아니라 css 속성으로 변화시킬 수 있는데, 예를 들면 아래와 같다.

 1

아무런 속성을 주지 않았다.

                

color:red

색상을 주었다.

                

color:blue;font-size:50px;

색생과 크기를 주었다.

동일한 아이콘으로 상황에 맞는 크기와 색깔을 지정 할 수 있는 것이다.                

동작 원리는 이러하다.

이미지를 font 로 변경한 것이다.

사실 우리가 많은 폰트들을 사용하고 있는데, “나눔고딕”, “명조체” 등등 사실 알고보면 입력값에 따라 이미지화 된 텍스트를 보여주는 것이다. 이 점에 착안하여 특별한 입력에 대해 아이콘을 폰트처럼 보여주기 때문에 이와 같은 조절이 가능하다.

여기까지는 기능을 살펴본 것이고 그럼 이것을 어떻게 활용 할 수 있는지 알아보자.

font icon 만들기

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

에 가서 svg 파일을 업로드하면 쉽게 만들 수 있다.

그렇다면 svg 파일은??

https://convertio.co/kr/png-svg/

png 파일을 svg로 변환시켜주는 온라인 툴이다.

원하는 png 파일을 svg 파일로 변환한 뒤 IcoMoon 에 가서 Import Icons 시킨 뒤에 다운 받으면 된다.

차근 차근 알아보자.

1. font icon으로 변환시킬 이미지 파일을 준비.
2. 이미지 파일을 svg 파일로 변환 시킨다.
3. IcoMoon 에서 svg 파일을 import 한다.
4. select 한다.
5. 폰트로 변환 시킨다.          
6. 다운로드한다.

그리하면 icomoon.zip 파일이 다운로드가 된다.

Font icon IcoMoon 파일 구성

나는 맥을 쓰므로 이렇게 생겼다.

demo.html ==> 열어보면 데모다.

fonts ==> 이곳에 fonts icon 이 들어 있다.

selection.json ==> 추후에 IcoMoon 에서 현재 font icon에 새로운 icon을 추가할 때 이 파일을 업로드하여 합칠 수 있다.

style.css ==> span element에서 사용할 class 가 정의 되어 있다.

style.css 를 살펴보자.

span element의 class에 icon-cat 을 넣어주면 content: “\e900” 이라는 font icon으로 변경시켜서 보여주는 것이다.

사용해보면 진짜 강력하다.

웹 개발자로 왜 여태 모르고 있었는지 모르겠다.

이상 font icon 에 대해서 공유를 마칩니다.