bokunonikki.net
JP / EN

railsにfontsを適用する

Wed Aug 9, 2017
Wed Aug 9, 2017

fontsをrailsに適用する

何かのアプリで作成したものや買ってきたテーマだとオリジナルのfontsがあることが多いので、その時のメモ。

試しに、bootstrapのfontsを例にやっていきます。

  • assetsにfontsを入れる。
  • application.cssをapplication.scssに変更

application.scssに以下を追記。

1
2
3
4
5
6
7
8
9
@font-face {
  font-family: 'Glyphicons Halflings';
  src: url(font-path('glyphicons-halflings-regular.eot'));
  src: url(font-path('glyphicons-halflings-regular.eot?#iefix')) format('embedded-opentype'),
       url(font-path('glyphicons-halflings-regular.woff2')) format('woff2'),
       url(font-path('glyphicons-halflings-regular.woff')) format('woff'),
       url(font-path('glyphicons-halflings-regular.ttf')) format('truetype'),
       url(font-path('glyphicons-halflings-regular.svg#glyphicons_halflingsregular')) format('svg');
}

これで終わり。

Glyphiconsを使ってみる

例)Facebookみたいな、いいねボタンを作ってみる

railsにfontsを適用する

Bootstrap、静的サイトだと下のように単純すればよいが、いざ、rubyで記述するときにやり方が、わからないことがたまにあるのでメモ。

1
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

たまにごちゃごちゃしたコードをみることもあるが、これがスッキリして使いやすい。faの部分を変えるだけで大ききさが変わる。

1
<%= link_to ('<i class="glyphicon glyphicon-thumbs-up fa-2x"></i>').html_safe  %>

なんか、pathとかつけた場合は、こう。

1
<%= link_to ('<i class="glyphicon glyphicon-thumbs-up fa-2x"></i>').html_safe, likes_path(post_id: post.id), method: :post  %>

これで終わり。

See Also