상담문의 010-2343-0702

Home > 고객센터 > 자료실

자료실

자료실

[기타]템플릿에서 적용된 아이콘 변경하기

  • 하나솔루션
  • 2021-03-31 11:08:23
  • hit566
  • 121.66.28.43

아이콘 폰트란?

 

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

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

 

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

 

 

 

 

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.jonstyle.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)하여 아이콘이 정상적으로 변경되었는지 확인합니다.

 

 

 

게시글 공유 URL복사
댓글[0]

열기 닫기

빠른상담 신청현황

  • 하**님이 문의하셨습니다.
    상담신청
  • 하**님이 문의하셨습니다.
    상담신청
  • 하**님이 문의하셨습니다.
    상담신청
  • 하**님이 문의하셨습니다.
    상담신청
  • 한**님이 문의하셨습니다.
    상담신청
  • 한**님이 문의하셨습니다.
    상담신청
  • 한**님이 문의하셨습니다.
    상담신청
  • 고**님이 문의하셨습니다.
    상담신청
  • 박**님이 문의하셨습니다.
    상담신청
  • 한**님이 문의하셨습니다.
    상담신청
  • 대**님이 문의하셨습니다.
    상담신청
  • 성**님이 문의하셨습니다.
    계약완료
  • 숙**님이 문의하셨습니다.
    계약완료
  • 만**님이 문의하셨습니다.
    계약완료
  • 주**님이 문의하셨습니다.
    상담완료
  • 성**님이 문의하셨습니다.
    상담완료
  • 현**님이 문의하셨습니다.
    상담완료
  • 하**님이 문의하셨습니다.
    상담완료
  • 이**님이 문의하셨습니다.
    상담완료
  • 정**님이 문의하셨습니다.
    상담완료

무통장 계좌번호

하나은행 : 661-910388-38207
예 금 주 : 하나솔루션(정지혜)

네임서버

1차 ns1.webit.kr 211.215.17.210
2차 ns2.webit.kr 211.215.17.212

서버 호스팅 주소

서울 서초구 서초동 1710-1 SK 브로드밴드 IDC

커뮤니티

  • 042-362-0702

  • 업무시간 : 월~금 오전9시 ~ 오후 6시

  • 점심시간 : 오후 12시 ~ 오후 1시

  • 토,일,공휴일, 국경일 : 휴무

상단으로 바로가기