[Font icon] ANT DESIGN 의 font icon 사용하기.

ANT DESIGN 은 react 나 react 에서 제공하는 서비스 입니다.

기존 폰트 아이콘을 사용하면 fontawesome 을 많이 이용하곤 했는데

이번 프로젝트에서 폰트아이콘으로 ANT DESIGN 으로 사용하게 되어

알아보다 기록을 남겨 봅니다.

일단 현재 시점으로 ANT DESIGN 폰트아이콘 사용관련 내용은 없네요.

그래서 fontawesome 처럼 사용하는 방법을 알려드리도록 하겠습니다.

구글에 "ant design webfont" 라고 검색합니다.

Download - Ant Design 클릭!!!!!!

다음과 같은 화면이 나옵니다.

Web Font 라고 써져있는 박스를 클릭하세요

그럼 파일을 자동으로 다운받습니다.

혹시 몰라서 파일 올립니다.

iconfont-2.10.x.zip

다운받은 압축 파일을 풀어서 안으로 들어가면 파일 목록이 나옵니다.

우리가 정말 필요한 파일은 위와 같이 빨간 테두리 파일만 가져가면 ANT DESIGN 아이콘을

사용할 수 있습니다.

예시로 demo html을 브라우저로 확인하면 더 상세하게 알 수 있습니다.

저는 사용할 수 있는 클래스명을 알고 싶어

demo_fontclass.html 을 브라우저로 열어서 확인했습니다.

생각보다 좋네요 ㅎㅎ

iconfont.css 내용을 확인해보면 다음과 같습니다.

아까 필요한 파일들을 연결해 놓고 있습니다. eot, woff, ttf, svg 등....

그리고 아이콘 모양은 before 속성을 이용해 content 에 값으로 아이콘 모양이 나옵니다.

css 로 아이콘 모양을 확인하는 것보단 아까 예시의 demo html 로 확인하는게 더 편합니다.

제가 우선 네비게이션에 들어가는 아이콘으로 사용한 모습 입니다.

깔금하네요~

이상으로 ANT DESIGN 의 font icon 사용하기를 마치겠습니다.

더 좋은 방법이나, 잘못된 내용은 덧글 부탁 드립니다.

감사합니다.