Icon Font 정리

🤟 Icon Font 정리

안녕하세요 TriplexLab입니다.

오늘은 벡터 이미지를 Icon Font로 만들어보는 것을 정리해 보겠습니다.

figma, Illustrator, sketch 등등의 벡터 이미지를 추출할 수 있는 디자인 툴을 사용하다 보면 벡터로 이미지를 SVG 파일로 뽑긴 뽑았는데... 
코드를 그대로 html 파일에 넣으면 너무 길어져서 코드 깊이가 길어지면 길어질수록 감당할 수가 없어지는 경험을 해본 적 있으신가요??

그래서 Icon Font로 만들어서 class로 불러와 사용해보겠습니다.

먼저 다음 사이트를 방문하시면

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

다음과 같은 화면이 나옵니다. 뭐 사용하고 싶은 아이콘 있으면 여기서 찾아서 써도 되지만 
저는 디자인팀에서 받은 디자인 파일에 있는 Icon을 Icon Font로 만들려는 의도입니다.

Import Icons버튼을 클릭합니다.

Import Icons버튼 강조

본인이 가지고 있는 SVG 파일을 불러옵니다.

SVG 파일을 불러오는 모습.

Select All 버튼을 클릭하여 모두 선택해주세요.

모두 선택 가능

그리고 Generate Font라는 버튼을 클릭해주세요.

원하는 아이콘 셀렉한 모습.

추출하기 전에 Icon명을 변경할 수 있습니다.
본인 입맛에 맛에 수정하면 되어요.

그다음 설정 버튼을 클릭합니다.

설정 버튼 클릭

그럼 다음과 같은 팝업창이 뜹니다.
1) Font Name은 추출할 때 폴더명을 지정하는 것
2) Class Prefix은 클래스명을 앞에 뭘로 넣을 것인지 지정이 가능하다.
    예) ic-Star, ic-Bell... (ic- 를 공통 클래스명을 지정할 수 있다는 뜻입니다.)
3) Use i (font selecting <i>)은 i라는 태그를 사용하겠다 라는 의미입니다.

기타 옵션들을 본인 편한대로 수정합니다.

이제 다운로드 버튼을 클릭하여
우리만에 Icon Font 파일을 다운로드합니다.

class명도 수정이 가능하다.

다운로드한 파일들 압축을 푸신 후 fonts라는 폴더에 있는 파일들을
해당 프로젝트 폴더에 넣습니다.
그리고 style.css라는 파일도 있는데 그곳에 코드들도 모두 자신의 프로젝트에 가져옵니다.
그렇게 자신의 입맛에 맞게 작업을 하신 후에

test용 html 파일에 가서 다음과 같이 작성합니다.
i 태그에 class값은 style.css파일에 있는 것 중에서 정해진 클래스명를 가지고 와서 테스트해봅니다.

<i class="ic-cart" aria-label="장바구니"></i>
<i class="ic-bell" aria-label="종"></i>
<i class="ic-bookmark" aria-label="북마크"></i>
<i class="ic-users" aria-label="유저들"></i>

👉 참고 aria-label속성을 넣으면 브라우저 내부에서 스크린리더가 검색이라고 읽어주는 의미 있는 태그가 됩니다.

저는 테스트를 해봤는데, 결과가 잘 나오네요. 

원하는 아이콘 문자로 사용이 가능해짐.

👉 정리

그렇다면 이제 로고도 SVG 파일만 있다면, 문자로 변환해서 css로 컨트롤이 자유로워진다는 얘기입니다.
그리고 아이콘도 이미지가 아닌, 문자이다 보니 용량에 신경 쓸 필요가 없네요 :)

보통은 Image Sprite라고 아이콘들을 하나의 파일(.png)에 모두 모아두어
css에서 'background-position'속성으로 위치를 잡아주곤 했습니다. 이 방법은 전통적인 방법이고, 많은 곳에서 사용하고 있습니다.
제가 위에서 소개하고 있는 방식은 전통적인 방법(Image Sprite) 보다 더 유지보수 할때 편리한 방법을 소개하는것 입니다. 👏👏