7
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Rails6でFont Awesome 5 を使う

Last updated at Posted at 2019-12-31

はじめに

rails6でFontAwesome5を使う機会があったのでその導入方法を共有します。
(rails5もほぼ同じだと思います)
今回は、CDN(リンクを使って読み込む方法)ではなくgemを使っていきます。

開発環境

rails 6.0.2
ruby 2.6.5

最低限のセットアップ

※必要に応じてファイル名等変えてください

rails new アプリ名 -d postgresql
rails db:create
rails g controller fonts

gemの導入

以下を追記しbundle install

Gemfile
(省略)
gem 'font-awesome-sass'

コードの記述

#####root画面を設定します。def indexをfontsコントローラに書きます(説明のための便宜上)

config/routes.rb
Rails.application.routes.draw do
  root to: 'fonts#index'
end
app/controllers/fonts_controller.rb
class FontsController < ApplicationController
  def index; end
end

#####stylesheetsの記述です(アイコンの色はピンクにしています)

app>assets>stylesheets>components>maps.scss
.icons {
  padding:  10px;
  display: flex;
  flex-wrap:wrap;
}

.icon {
  color: pink;
  margin:  10px;
}
  • application.cssをapplication.scssに書きかえfont-awesomeをimportします
app>assets>stylesheets>application.scss
@import "font-awesome-sprockets";
@import "font-awesome";

#####Viewにfont-awesomeの記述をします
家のアイコンを出してみます。

app>views>fonts>index.html.erb
<h5>FontAwesomeアイコン</h5>
<div class="icons">
    <div class="icon">
        <%= icon('fas','home')%>
    </div>
</div>
ここまでの出力です
スクリーンショット 2019-12-31 13.42.38.png
サイズを調整し複数アイコンを並べます。

classのfa-3xでサイズ調整、fa-fwで各アイコンの幅を揃えています。

app>views>fonts>index.html.erb
<h5>FontAwesomeアイコン</h5>
<div class="icons">
  <div class="icon">
    <%= icon('fas','home',class: "fa-3x fa-fw" )%>
  </div>
  <div class="icon">
    <%= icon('fas','star',class: "fa-3x fa-fw" )%>
  </div>
  <div class="icon">
    <%= icon('fas','taxi',class: "fa-3x fa-fw" )%>
  </div>
  <div class="icon">
    <%= icon('fas','train',class: "fa-3x fa-fw" )%>
  </div>
</div>
スクリーンショット 2019-12-31 13.46.48.png ##自分が使いたいアイコンを探しましょう 以下のサイトでアイコンを探してみましょう。有料のものと無料のものがあります。 [FontAwesome](https://fontawesome.com/icons?d=gallery)

今回はいいね!ボタンを探してみます。

thumbs-upの名前でみつかりました!
スクリーンショット 2019-12-31 14.02.20.png

アイコンの上に<i class="far fa-thumbs-up"></i>という記述があります。  
railsのviewで使う際は<%= icon('far','thumbs-up')%>とすることでアイコンを出すことができます。
(iconメソッドはヘルパーなので別の書き方ももちろんできます。)

viewに記述します。

app>views>fonts>index.html.erb
<h5>FontAwesomeアイコン</h5>
<div class="icons">
  <div class="icon">
    <%= icon("far","thumbs-up",class: "fa-5x", style: "color: rgb(97,103,112);")%>
  </div>
</div>
スクリーンショット 2019-12-31 14.13.59.png

##自分の好みにカスタマイズします
いいね!ボタンを回転させたり方向を変えたりしてみます。

app>views>fonts>index.html.erb
<h5>FontAwesomeアイコン</h5>
<div class="icons">
  <div class="icon">
    <%= icon("far","thumbs-up",class: "fa-5x fa-pulse", style: "color: rgb(97,103,112);")%><br>
    <%= icon("far","thumbs-up",class: "fa-5x fa-rotate-180", style: "color: rgb(97,103,112);")%>
    <%= icon("far","thumbs-up",class: "fa-5x fa-rotate-270", style: "color: rgb(97,103,112);")%>
    <%= icon("far","thumbs-up",class: "fa-5x fa-flip-horizontal", style: "color: rgb(97,103,112);")%>
    <%= icon("far","thumbs-up",class: "fa-5x fa-flip-vertical", style: "color: rgb(97,103,112);")%>
  </div>
</div>

ezgif.com-video-to-gif.gif

##アイコンにリンクを張ります
書き方が変わります。(pathは変えてください)

app>views>fonts>index.html.erb
<h5>FontAwesomeアイコン</h5>
<div class="icons">
  <div class="icon">
    <%=link_to(content_tag(:i,'いいね!',class:"far fa-thumbs-up fa-3x",style: "color: rgb(97,103,112);"),root_path)%>
  </div>
</div>
スクリーンショット 2020-01-01 19.44.44.png

##最後に
その他多くのカスタマイズができます。
以下のサイトが参考になります。
w3shools.com

最後まで読んでいただきありがとうございました。

7
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?