레일스 프로젝트에서 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를 이용하여 원하는 아이콘 이미지를 작성했다.
벡터로 그리는 이미지는 투명 바탕에 블랙 색상으로 채운다. 주의할 것은 파일 저장시 반드시 파일 포맷을 .svg 로 지정해야 한다. 이제 방금 작성했던 이미지 파일 디렉토리로 이동하여 아래와 같이 명령을 실행한다.
$ fontcustom compile
이제 fontcustom 디렉토리가 생성되고 아래와 같은 파일이 생성될 것이다.
fontcustom.css
fontcustom-preview.html
fontcustom_UNIQUEHASH.ttf
fontcustom_UNIQUEHASH.eot
fontcustom_UNIQUEHASH.woff
fontcustom_UNIQUEHASH.svg
미리뷰 파일을 보면 아래와 같이 보이게 된다.
이 디렉토리를 레일스 프로젝트의 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의 첫글자)
1 Comment