4
6

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.

RailsでFontAwesomeの導入〜大きさを変えるまで

Last updated at Posted at 2020-02-14

#はじめに
railsでFontAwesomeを使いたいと思い調べていたところ、
大きさまで変える記事が見当たらなかったため投稿してみました。
#実行環境
Ruby : 2.6.3
Rails : 5.2.4
slim : 4.0.1
font-awesome-sass : 5.12.0
上記の環境で実装いたしました。

#FontAwesomeの導入
Gemfileに以下を記述

Gemfile

gem 'font-awesome-sass'

gemをインストール

bundle install

/app/assets/stylesheets/application.css

/app/assets/stylesheets/application.scss
に変更する

mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss

/app/assets/stylesheets/application.scssに以下を記述

application.scss
@import "font-awesome-sprockets";
@import "font-awesome";

上記の順番通りに記述したことで、FontAwesomeが使えるようになった。

#実行結果
font-awesome-sassがインストールされたことにより、ヘルパーメソッドが使えるようになりました。
このメソッドを使うことでアイコンを表示させます。

~.html.slim
= link_to "#" do
  = icon 'fab', 'amazon-pay'

これでアイコンが表示されました。
今回使用したアイコン

Qiita使用画像.png

#大きさを変更する
上記で用いたヘルパーメソッドを用いることによって好みの大きさに変更することも可能です。

~.html.slim
= link_to "#" do
  = icon 'fab', 'amazon-pay fa-3x'

このメソッドは次のように構成されています。

icon 'スタイル名', 'アイコン名 (大きさ指定)'

大きさの指定をしない場合は、アイコン名のみを記述し、
大きさ指定をする場合は、アイコン名の後にスペースをあけ、'fa-(サイズ)'で好きな大きさに変更することができます。サイズに関しては公式サイトをご覧ください。
Font Awesome

#最後に
初めて記事を投稿してみました。
分かりやすい記事になったかは不安ですが、誰かの助けになれば幸いです。

4
6
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
4
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?