아이콘 폰트란?

 

특수문자코드를 입력해서 다양한 아이콘을 사용할 수 있도록 해주는 기능입니다.

아이콘 폰트는 텍스트 형태로 되어있어서 크기 및 색상의 변경이 자유롭습니다.

 

다음과 같이 따라하시면 누구나 간편하게 아이콘을 변경 할 수 있습니다.

 

 

 

 

0. 아이콘 변경하기

 

- 샘플사이트의 전화하기 아이콘을 변경해보겠습니다.

http://ursmart112.anybuild.co.kr/main

 

 

 

 

 

1. 아이콘 폰트 파일 다운 받기

 

1.1) 관리자모드에 접속합니다.

 

1.2) [디자인관리 > 고급 디자인 관리 > 웹디자인FTP]에서 PC웹 디자인 FTP에 접속합니다.

 

 

 

 

1.3) icomoon 폴더로 들어갑니다.

 

 

 

 

1.4) selection.json 파일을 다운받습니다.

(selection.jon 파일에는 해당템플릿에 사용된 모든 아이콘의 정보가 담겨져 있습니다.)

 

 

 

 

 

2. 아이콘 사이트 사용방법

 

2.1) icomoon.io 사이트에 접속합니다.

(icomoon 은 아이콘 폰트를 제공하는 서비스입니다.)

http://icomoon.io/

 

 

2.2) IcoMoon App 버튼을 클릭합니다.

 

 

 

 

2.3) Import Project 를 클릭합니다.

 

 

 

 

2.4) 다운받아둔 selection.json 파일을 선택합니다.

 

 

 

 

2.5) 추가된 Project 를 Load 합니다.

 

 

 

 

 

3. 아이콘 확인 후 추가하기

 

3.1) 현재 등록된 아이콘들이 보여집니다.

 

3.2) Add Icons From Library... 를 클릭합니다.

 

 

 

 

3.3) IcoMoon - Free 를 Add 합니다.

 

주의) Purchase 로 되어있는것은 유료이므로 사용하지 않도록 합니다.

템플릿에서는 다음 두종류를 사용하고 있습니다.

IcoMoon - Free (32 grid)

Entypo+ (40 grid)

 

 

 

 

3.4) 원하는 아이콘을 선택 한 후, Generate Font 를 클릭합니다.

(Generate Font 를 누르면 아이콘별 코드값을 알 수 있습니다.)

 

 

 

 

3.5) Download 합니다.

(새로 추가된 아이콘의 코드값을 확인합니다.) - e942

 

 

 

 

 

4. Font 파일 업데이트 하기

 

4.1) Download 받은 파일의 압축을 해제 합니다.

 

 

 

 

4.2) [디자인관리 > 고급 디자인 관리 > 웹디자인FTP]에서 PC웹 디자인 FTP에 접속합니다.

 

 

 

 

4.3) icomoon 폴더로 들어갑니다.

 

 

 

 

4.4) font 파일 4종 및 selection.jon, style.css 파일을 업로드 합니다.

 

 

 

 

 

5. 전화하기 아이콘 변경하기    

 

5.1) 전화하기 아이콘에서 우클릭 후 검사(N)를 선택합니다.

 

 

 

 

5.2) 아이콘이 적용된 css를 찾습니다.

(적용된 class 명 tel:before)

(적용된 아이콘 코드 : e90f)

 

 

 

 

5.3) [디자인관리 > 고급 디자인 관리 > CSS 파일관리] 에서 layout_mobile 수정을 클릭합니다.

 

 

 

 

5.4)  검색기능(ctrl+f)을 사용하여 tel:before 를 찾습니다.

 

 

 

 

5.5) 아이콘의 코드 및 색상을 변경합니다.

 

 

 

 

 

6. 사이트 확인하기

- 사이트를 새로고침(F5)하여 아이콘이 정상적으로 변경되었는지 확인합니다.