bootstrapとfont-awesomeの導入

今回、Railsはver5.○.○を使っており、gemを用いて

bootstrapはver4.○.○

font-awesomeはver5.○.○

を導入する。

前提として、app/assets/stylesheets/application.cssはapplication.scssへファイル名を変更しておく。

 

bootstrap

・HTML、CSSJavaScriptで構成されたボタンやナビゲーションメニューなどがテンプレートとして用意されているツール。

Twitter社が作った。

今回はver4.○.○を使用する。

 

<インストール方法>

Gemfileに

gem 'bootstrap', '~> 4.○.○'

を記入。(○部分はバージョン詳細) 

 

②ターミナルでbundle installする。

 

③app/assets/stylesheets/application.scss (application.cssから名前を変更済み)に

@import 'bootstrap';

を記入する。

 

font-awesome

・アイコンフォントという文字として使うことができるツール。

・画像ではなく文字なので、大きさ・回転・重ね表示、そして色までも変更することができる。

 

<インストール方法>

今やっている課題ではRails5を使用しているため、Rails5でのインストール方法

①Gemfileに 

gem 'font-awesome-sass', '~> . 5.◯.○'

を記入。(○部分はバージョン詳細) 

 

②ターミナルでbundle installする。

 

③app/assets/stylesheets/application.scss に

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

 

を記入。

※順番は-sprocketsを先にする