최효성 기타 Etc

사용자 폰트 사용하기

레일스 프로젝트에서 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
대장(colon) 아이콘
stomach
위장(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에서 c 는 custom의 첫글자)

2015-06-26_12-47-53