railsにfontsを適用する

fontsをrailsに適用する

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

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

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

application.scssに以下を追記。

@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で記述するときにやり方が、わからないことがたまにあるのでメモ。

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

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

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

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

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

これで終わり。