A Little Each Day

note to self

Ruby on RailsにFont Awesomeを導入する方法

こんにちは。本日はRailsにFont Awesomeを表示する方法です。

フォントを表示すればデザイン的にもよろしいし、ユーザーにもわかりやすいですよね。

RailsにはFont Awesomeを簡単に導入できる便利なGemがあるのですぐに導入することができます。

バージョン

Ruby '2.2.1'
Rails '4.2.1'


font-awesome-sassのインストール

まずRailsにfont-awesome-sassというGemをインストールします。

Gemfileに以下を表記。

# Gemfile

gem 'font-awesome-sass'


いつものようにターミナルでインストール。

 $ bundle install


以上でfont-awesome-sassの導入は完了です。


application.css.scssの編集

font-awesome-sassは名前の通りsassに対応しているのでrails newした時にデフォルトで生成されるapplication.cssをapplication.css.scssにリネームする必要があります。

リネームが済んだら@importを使いfont-awesomeを読み込みます。

/* application.css.scss */

@import "font-awesome-sprockets";
@import "font-awesome";


以上ですべての準備は完了しました。


font-awesomeを表示してみよう

では実際にfont-awesomeを表示してみましょう。

今回は投稿一覧の新規投稿の部分(New Post)をフォントにしてみましょう。

f:id:chi_kun:20160331232253p:plain


まず投稿一覧の新規投稿部分のコードを修正します。

# posts.index.html.erb

<div class="container">

<h1>Listing Posts</h1>

<table>
  <thead>
    <tr>
      <th>Title</th>
      <th>Content</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody>
    <% @posts.each do |post| %>
      <tr>
        <td><%= post.title %></td>
        <td><%= post.content %></td>
        <td><%= link_to 'Show', post %></td>
        <td><%= link_to 'Edit', edit_post_path(post) %></td>
        <td><%= link_to 'Destroy', post, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>
</table>

<br>

<%= link_to new_post_path do %>
  <i class="fa fa-pencil-square-o">新規投稿</i>
<% end %>

</div>


ブラウザをリロードすると...

f:id:chi_kun:20160408222445p:plain


きちんとフォントが表示されましたね。



本日は以上です。