사용자 폰트 사용하기

레일스 프로젝트에서 font-awesome-rails 젬을 사용하면 Font Awesome을 쉽게 사용할 수 있다.  뿐만 아니라 이 젬은 fa_icon() 또는 fa_stacked_icon()와 같은 헬퍼메소드까지 제공해 주어 아이콘 폰트를 쉽게 다룰 수 있게 해 준다. 그러나 Font Awesome에서 제공해 주는 많은 아이콘 외에 원하는 폰트를 만들어 사용하고자 하는 요구가 생길 수 있다. 물론 구글검색을 통해서 여러가지 해결방안을 알 수 있지만, 이 글에서는 필자가 경험한 예를 정리하여 공유하고자 한다. 필자는 병원내 인트라넷 프로젝트를 진행하는 중에 위와 같은 요구가 발생하게 되어 구글링을 통해 해결책을 찾아 보았다. 검색 키워드에

custom font awesome icon 와 같이 입력한 후 검색한 결과 페이지에서 첫번째로 보이는  JARED SARTIN의 글은 문제해결을 쉽게 해 주었다.

이 글에서 소개한 내용 중의 Font Custom 이라는 툴은 자신이 제작한 SVG 이미지를 이용하여 Font Awesome같은 폰트 아이콘 세트를 생성할 수 있게 해 준다.

예를 들어, cow.svg 라는 파일을 생성하면 icon-cow라는 클래스를 사용할 수 있게 되는 것이다.

문서를 따라 하면 쉽게 Font Custom 툴을 설치할 수 있다.

필자는 맥환경에서 작업을 하기에 벡터 이미지 툴인 iDraw를 이용하여 원하는 아이콘 이미지를 작성했다.

colon
]1대장(colon) 아이콘
stomach
]2위장(stomach) 아이콘

벡터로 그리는 이미지는 투명 바탕에 블랙 색상으로 채운다. 주의할 것은 파일 저장시 반드시 파일 포맷을 .svg 로 지정해야 한다. 이제 방금 작성했던 이미지 파일 디렉토리로 이동하여 아래와 같이 명령을 실행한다.

$ fontcustom compile

이제 fontcustom 디렉토리가 생성되고 아래와 같은 파일이 생성될 것이다.

fontcustom.css 
fontcustom-preview.html 
fontcustom_UNIQUEHASH.ttf 
fontcustom_UNIQUEHASH.eot 
fontcustom_UNIQUEHASH.woff 
fontcustom_UNIQUEHASH.svg 

미리뷰 파일을 보면 아래와 같이 보이게 된다.

2015-06-26_12-36-01

이 디렉토리를 레일스 프로젝트의 apps/assets/stylesheets/ 로 이동한 후 asset pipeline과 연결하기 위해서 fontcustom.css 파일의 확장자를 .scss로 변경하고 아래와 같이 url()asset-url()로 변경하고 폰트경로를 변경한다.

/* Icon Font: fontcustom */ 
@font-face { 
  font-family: "fontcustom"; 
  src: asset-url("fontcustom/fontcustom_12a0a57f731cf5b1d5f4980b6d475776.eot"); 
  src: asset-url("fontcustom/fontcustom_12a0a57f731cf5b1d5f4980b6d475776.eot?#iefix") format("embedded-opentype"), asset-url("fontcustom/fontcustom_12a0a57f731cf5b1d5f4980b6d475776.woff") format("woff"), asset-url("fontcustom/fontcustom_12a0a57f731cf5b1d5f4980b6d475776.ttf") format("truetype"), asset-url("fontcustom/fontcustom_12a0a57f731cf5b1d5f4980b6d475776.svg#fontcustom") format("svg"); 
  font-weight: normal; 
  font-style: normal; 
} 
@media screen and (-webkit-min-device-pixel-ratio:0) { 
  @font-face { 
    font-family: "fontcustom"; 
    src: asset-url("fontcustom/fontcustom_12a0a57f731cf5b1d5f4980b6d475776.svg#fontcustom") format("svg"); 
  } 
} 
[data-icon]:before { content: attr(data-icon); } 
[data-icon]:before, .fac:before { 
  display: inline-block; 
  font-family: "fontcustom"; 
  font-style: normal; 
  font-weight: normal; 
  font-variant: normal; 
  line-height: 1; 
  text-decoration: inherit; 
  text-rendering: optimizeLegibility; 
  text-transform: none; 
  -moz-osx-font-smoothing: grayscale; 
  -webkit-font-smoothing: antialiased; 
  font-smoothing: antialiased; 
  color:#c4474c; 
} 
.fa-colon:before { content: "\f100"; } 
.fa-stomach:before { content: "\f101"; } 
.fa-saved:before { color:green; } 
.fa-disabled:before { color:#ccc; } 

변경된 부분은 7-11, 19번째 코드라인이다.  25-49번째 코드라인을 유심히 보면 약간의 변경내용을 확인할 수 있다. 이것은 디폴트로 생성되는 icon-colon, icon-stomach 클래스 대신에 Font Awesome 의 클래스 명명을 이용하기 위해서 약간의 트릭을 사용한 것이다. 즉, icon-stomach 대신에 fa fa-stomach 과 같이 사용하려는 의도에서였다. fa 클래스는 Font Awesome에서 이미 사용하는 클래스이므로 fac로 명명하면 된다. 결국,

<i class="fac fa-stomach"></i> 
<!-- 또는 --> 
<i class="fac fa-colon"></i>

와 같이 사용할 수 있도록 하기 위한 조치였다. (fac에서 ccustom의 첫글자)

2015-06-26_12-47-53

1 Comment

댓글 남기기

This site uses Akismet to reduce spam. Learn how your comment data is processed.