웹디자인용 아이콘 폰트(서체,무료 아이콘 사이트)

웹디자인 할때 자주 쓰는 아이콘 폰트 XEICON 

웹페이지나 product 디자인 등을 할 때 자주 사용하는 폰트 아이콘 이다. 

 

 

폰트 아이콘이란? 

일반적으로 쓰는 폰트 처럼 서체를 다운 받아 설치하고, (xeicon.ttf) 

포토샵이나 일러스트에서 아이콘을 폰트 처럼 사용하는 것을 말한다. 

 

설치 가능한 아이콘 폰트 종류 

 

서체 설치를 하고나면 이렇게 일러스트나, 포토샵 프로그램

글자 선택 창에 해당 폰트가 생긴다. 

일러스트에서 xeicon 폰트 설처 

 

 

 

사용하기 

 

 

http://xpressengine.github.io/XEIcon/library-2.3.3.html

 

 

위 페이지에 들어가서 사용할 아이콘을 복사한 뒤에 일러스트에서

텍스트 입력 툴을 누른뒤에 붙여넣기 해준다. 

 

아이콘 복사 하기 

 

텍스트-아이콘입력 붙여넣기 

 

이렇게 아이콘을 폰트로 써서 그냥 사용하는 경우도 있고, 

 

때에 따라, 굵거나 얇은 아이콘이 필요한 경우가 있는데 

폰트 아이콘을 사용하면 커스텀이 편해 진다. 

 

폰트 깨기전 

폰트 깨기 -Shift+Ctrl+O 

 

일러스트에서 폰트 깨기를 통해 (단축키 Shift+Ctrl+O)

벡터 아이콘을 얻을 수 있다.

 

 

위처럼 같은 아이콘이지만 다양하게 변화를 줄 수 있어서, 

xeicon 을 베이스로 해서 아이콘을 커스텀 해서 사용하는 경우가 종종 있다.  

해당 라이브러리에 필요할때마다 들어가서 필요한 아이콘을 찾아서 쓰면 끝! 

 

 

XEIcon, 문자를 그리다

 

 

처음 셋팅이 다소 번거로울 수 있지만 한번 셋팅해 두면 

상세페이지나, 기타 디자인 작업할 때 마다 필요한 아이콘 찾아 구만리 떠나는 

불필요한 시간을 줄여준다. 

 

 

 

 

**그 외의 폰트 아이콘 

 

REMIX ICON 

 

http://remixicon.com/

http://remixicon.com/

Remix Icon - Open source icon library

 

 

IONICONS 

 

https://ionic.io/ionicons

 

https://ionic.io/ionicons

Ionicons: The premium icon pack for Ionic Framework

 

 

 

FONT의 TTF와 OTF의 차이점? and EOF, WOFF

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=appcomo&logNo=221784073189