본문으로 바로가기

Axure에서 Font Awesome 아이콘 폰트 사용하기.

 

서비스 설계 시 기획 의도를 정확히 표현하기 위해 아이콘을 사용해야 하는 경우가 종종 발생합니다. 저는 그 동안 아이콘파인더에서 무료 아이콘을 다운받아 사용해왔는데요. 최근에는 아이콘 폰트를 활용한 방식이 많이 사용되고 있다고 합니다.

 

아이콘 폰트에 대한 내용은 weddir님의 아이콘 폰트(IconFont)의 모든 것 포스트 참조.

아이콘 폰트를 사용 할 경우의 가장 큰 장점은 폰트를 설정하는 방식과 동일하게 아이콘 크기와 색상을 자유롭게 지정할 수 있다는 점입니다. 기존 이미지 방식인 경우에는 이미지가 가공되면 손실이 발생하는데 아이콘 폰트는 그럴 일이 전혀 없습니다.

 

아이콘 폰트(어썸폰트)를 Axure에서 사용하는 방법은 다음과 같습니다.

 

1. PC에 어썸폰트 설치.

첨부한 폰트파일 다운로드 및 압축해제 후 fonts 폴더를 열어 어썸폰트를 설치합니다.

font-awesome-4.4.0.zip

 

2. Axure 재부팅

Axure가 실행중이였다면 종료 후 다시 실행합니다.

 

3. Generate 옵션에 Font Awesome 웹 폰트 적용.

폰트가 설치되어 있지 않은 환경에서도 깨지지 않고 잘 보여지도록 웹 폰트를 적용합니다.

[경로 : 메뉴 - publish - Generat HTML Files.. - Web Fonts]

 

- Name : Font Awesome

- URL : https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css

 

 

4. Font Awesome 라이브러리 다운로드

FontAwesomeV4.4.rplib


5. Font Awesome 라이브러리 추가 후 사용

- Axure를 실행하고 Widgets 옆 햄버거 아이콘을 클릭한다.

- Load Library를 클릭한다.

- 다운받은 OOOOO.rplib 라이브러리 파일을 오픈한다.

- Widgets에 추가 된 라이브러리를 드래그해서 사용한다.

 

 

저작자 표시 비영리 변경 금지
신고
웹기획자 조영수
여행 카테고리 서비스 기획자. 《처음부터 다시 배우는 웹 기획》 저자. 웹기획&AXURE 강사. 웹/모바일 기획자 그룹 운영자.

댓글을 달아 주세요

  1. Mr cHoi 신고">2016.03.28 15:15 신고

    안녕하세요~ 블로그 보고 많은 도움이 되었습니다. 블로그보며 웹폰트 다운받았는데요. 드래그해서 페이지에 올리니 파일이 노출되지않고 깨지는데 이게 무슨 문제인지 알 수 있을까요??

  2. BlogIcon 웹기획자 조영수 신고">2016.03.28 15:52 신고

    포스팅 설명글 중 1번 PC에 웹폰트 설치. 3번 웹 폰트 설정을 하셨나요? 이 두가지가 안되어 있는 경우 폰트가 깨지기도 합니다.