아이콘 문자표 손쉽게 적용하기

요즘 한창 만들고 있는 쇼핑몰이 제로보드로 구성이 되어 있습니다. 화면을 만들고 기능을 추가하는데 메뉴구조를 파악못하면 건들기도 힘들게 되어 있던데 그러한 모듈화가 의외로 도움이 되는 부분이 많습니다. 파악만 되면 정말 쉽게 고칠 수 있게 되어 있더군요. 메인페이지를 수정하면서 메뉴별 아이콘을 적용해야 될 일이 생겼습니다.

 

기존에 제가 알고 있는 상식이라면 아이콘를 사이즈별로 만들고 첨부파일로 업로드한뒤 이미지의 링크를 걸어서 표기를 하는 방법이었는데요. 참으로 효율없는 방식이었습니다.

 

요즘에는 CDN이 워낙 잘되어 있어서 라이브러리 로드한뒤 그냥 가져다 쓰면 되게 되어있더군요.

 

 

2017/06/27 - [IT정보/PHP] - PHP 현재시간 표기방법총정리

2017/06/26 - [블로그/검색엔진최적화] - 네이버 썸네일 노출 안되는현상 총정리

2017/06/24 - [오류해결] - null point exception 안나오게 하는방법

2017/06/20 - [블로그/운영노하우] - 동영상 GIF 및 움짤 만들기

 

 

아이콘 문자표 손쉽게 적용하는 방법

우선 이렇게 유용한 사이트 경로는 다음과 같습니다.

 

폰트어썸 바로가기

한번씩 업데이트 될때마다 신규 아이콘을 추가해서 배포를 하는것 같은데요. 신규로 추가된 아이콘은 다음과 같습니다.

 

 

 

 

이러한 CDN을 적용한는 방법은 화면을 자세히 보면 가이드를 잘해주고 있는데요. 우리나라 개발자나 디자이너들이 영어가 약해서 눈앞에 두고도 못찾는 경우가 많이 생기는 것 같습니다.

 

 

 

 

화면을 자세히 보시면 처음 오시는 분들은 이렇게 시작해라고 친절하게 표기를 해놓은게 보이네요.

 

 

 

이런류의 라이브러리 다운로드 사이트는 구조가 거의 비슷합니다. 어떻게 돌아가는지 살펴보기 위해서는 Examples, 시작을 위해서는 Start를 찾아 주시면 간단하게 이해하실 수 있을겁니다.

 

 

 

 

이처럼 다운로드를 받을 수 있으며, 사용방법도 안내해주고 있습니다. 링크파일을 소스에 삽입을 하고, css파일 경로만 맞추어 주면 아이콘을 맘대로 꺼내 쓸 수 있습니다.