Applying fonts to rails

A note on the original fonts, which are often created by some application or a theme you have bought.

To try it out, we will use bootstrap fonts as an example.

Put the fonts in assets.
Change application.css' to application.scss

Add the following to 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');
}

That’s it.

Glyphiconsを使ってみる

Example: Let’s make a Like button like Facebook.

! [railsにfontsを適用する](.. /images/iine.jpg)

Bootstrap

For a static site, you can simply do the following, but when it comes time to write in ruby, I sometimes don’t know how to do it, so I made a note of it.

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

Sometimes I see messy code, but this is cleaner and easier to use. Just change the fa part to change the size.

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

If you put something like PATH on it, like this.

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