foobar

note to self

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

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

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

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

バージョン

Ruby Rails
2.2.1 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.cssapplication.css.scssにリネームする必要があります。

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

/* application.css.scss */

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

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

font-awesomeを表示してみよう

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

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

f:id:otsukasatoshi:20191024170043p: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:otsukasatoshi:20191024170009p:plain

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

本日は以上です。