어썸폰트 아이콘 라이브러리 (500여개의 아이콘)

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에 추가 된 라이브러리를 드래그해서 사용한다.