Rails 프로젝트에 Framework7 Icons 적용하기

1. https://github.com/framework7io/framework7-icons repository를 clone 한다.

2. package/fonts/ 디렉토리에 있는 폰트 4개를 Rails 프로젝트의 app/assets/fonts/ 에 둔다.

* Framework7Icons-Regular.eot

* Framework7Icons-Regular.ttf

* Framework7Icons-Regular.woff

* Framework7Icons-Regular.woff2

3. package/css/framework7-icons.css의 내용을 Rails 프로젝트의 app/assets/stylesheets/application.css 에 넣는다.

이 때 url부분의 폰트 경로는 폰트 이름만 남게 수정해준다.

@font-face {
   font-family: 'Framework7 Icons';
   font-style: normal;
   font-weight: 400;
   src: url("Framework7Icons-Regular.eot");
   src: url("Framework7Icons-Regular.woff2") format("woff2"),
        url("Framework7Icons-Regular.woff") format("woff"),
        url("Framework7Icons-Regular.ttf") format("truetype");
 }

 .f7-icons, .framework7-icons {
   font-family: 'Framework7 Icons';
   font-weight: normal;
   font-style: normal;
   font-size: 28px;
   line-height: 1;
   letter-spacing: normal;
   text-transform: none;
   display: inline-block;
   white-space: nowrap;
   word-wrap: normal;
   direction: ltr;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-feature-settings: "liga";
   -moz-font-feature-settings: "liga=1";
   -moz-font-feature-settings: "liga";
   font-feature-settings: "liga";
   text-align: center;
 }

4. Rails 프로젝트의 config/initializers.assets.rb 파일에 아래 코드를 추가한다.

(폰트를 asset pipeline에 추가하는 과정)

Rails.application.config.assets.paths << Rails.root.join('app', 'assets', 'fonts')

5. 서버 재시작하기