RailsアプリケーションにBootstrapとFont Awesomeを導入するときの初期設定のメモを残しておきます。
導入のときに何度か手こずったので、2度と手こずらないように！
Gemfile
まず、Gemfileに下記のGemを入れます。
# font awesome用 gem "font-awesome-rails" gem 'font-awesome-sass' # bootstrap用 gem 'bootstrap', '~> 4.1.1' gem 'jquery-rails'
そして、bundle installします。
application.scssとapplication.js
そして、application.scssとapplication.jsで、BootstrapとFont Awesomeのファイルが読み込まれるように設定します。
※application.scssはapplication.cssのファイル名を変更したものです。
application.scssは記述されていたものを削除してから下記ディレクティブを上書きします。
@import "bootstrap";
自作したcssファイルがあれば、それも読み込むよう記述します。例えば、common.cssを自作して読み込ませたい場合は、下記のようになります。
@import "bootstrap"; @import "common";
application.jsは、元から記述されていたディレクティブの部分にjquery3、popper、bootstrap-sprocketsが読み込まれるよう、下記のように記述します。
※require turbolinksとrequire_tree .は元からある場合の例
//= require jquery3 //= require popper //= require bootstrap-sprockets //= require turbolinks //= require_tree .
ViewファイルからFont Awesomeのcssファイルを読み込む
最後に、viewファイル（erbファイル）のhead内でFont Awesomeのcssファイルの読み込み先を記述します。共通テンプレートのapplication.html.erbなどに記述することになるでしょう。
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
Font AwesomeのURLは、Font Awesomeの公式サイトからコピーすることができます。
参考
Ruby on Railsをこれから本格的に勉強したい人は「エンジニアになるための600時間のプログラミング学習に耐え抜くコツ」という記事がおすすめです。