11
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

国産Webフォント「Ligature Symbols」をRailsで使う方法

Last updated at Posted at 2015-07-03

いつもはみんな大好きFont Awesomeでアイコン周りを済ませてるんですが、いまやってる案件でLINEのアイコンが必要になったのでLigature SymbolsをRailsに組み込みました。
Ligature Symbolsに限らず、他のWebFontを組み込む場合でも同じ内容でいけるはずです。

Ligature Symbolsを設置する

  • Ligature Symbolsより、ファイル一式をダウンロード
  • vendor/assets下にfontsディレクトリを設置して、解凍したファイルからフォントファイルを格納
|-vendor/
|---assets/
|-----fonts/
|-------LigatureSymbols-2.11.eot
|-------LigatureSymbols-2.11.otf
|-------LigatureSymbols-2.11.svg
|-------LigatureSymbols-2.11.ttf
|-------LigatureSymbols-2.11.woff

Ligature Symbolsを読み込む

  • Ligature SymbolsにCSSの書き方書いてある
  • urlだけ、asset-urlに置き換える
app/assets/user.css.scss
@font-face {
    font-family: 'LigatureSymbols';
    src: asset-url('LigatureSymbols-2.11.eot');
    src: asset-url('LigatureSymbols-2.11.eot?#iefix') format('embedded-opentype'),
         asset-url('LigatureSymbols-2.11.woff') format('woff'),
         asset-url('LigatureSymbols-2.11.ttf') format('truetype'),
         asset-url('LigatureSymbols-2.11.svg#LigatureSymbols') format('svg');
    font-weight: normal;
    font-style: normal;
}

省略

Viewで表示

  • 後は公式ドキュメント通りです。
app/views/users/index.html.erb
<span class="lsf-icon" title="line">Line</span>
11
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?