はじめに
Railsでポートフォリオを作成するときにアイコンを使ってUIを高めたい。
そんなときに便利なのがFontAwesomeというサービスです。
今回はhamlというテンプレートエンジンでFontAwesomeを使えるようにするための手順をまとめたいと思います。
この記事のゴール
- FontAweseomeとは何かを理解する
- hamlのルールに従ってFontAwesomeのアイコンを使えるようにする
目次
1.FontAwesomeとは
2.FontAwesomeの導入
3.FontAwesomeをhamlで記述
1. FontAwesomeとは
Font AwesomeはWebサイトやスマホアプリ用のアイコンライブラリで、さまざまなスタイルの数千ものアイコンが利用できるサービスです。
FontAwesome
こちらが公式HPです。基本は無料で利用できますが、一部有料のアイコンもあります。
では、早速導入手順に移ります。
2. FontAwesomeの導入
Railsの場合、FontAwesomeを導入する方法として2通りあります。
gem 'font-awesome-rails'を利用するか、gem 'font-awesome-sass'を利用するかの2種類です。
結論を言えば、gem 'font-awesome-sass'は最新版のfont-awesome5に対応しているのでこちらをインストールしましょう。
gem 'font-awesome-sass', '~> 5.4.1'
bundle install
rails newでアプリを作成した初期状態ではファイル名がapplication.cssになっていると思います。
そこでファイル名をapplication.scssに変更して以下のコードを追記してください。
@import 'font-awesome-sprockets';
@import 'font-awesome';
これでFontawesomeの導入は完了です！
3. FontAwesomeをhamlで記述
導入は済んでいるので、あとはアイコンを使用したいファイルの中にコードを記述します。
例えば、以下のような人物のアイコンを使用したいときは次のように記述します。
（ちなみにFontAwesome内でアイコンを探すときは検索バーに英単語を入力して探していきます。下のアイコンはpersonと入力してみつけました。）
= icon("fas", "user", class: "user-icon")
しかし、FontAwesomeの公式ページで確認するとこのアイコンのコードは
<i class="fas fa-user"></i>
とHTML用に記述されています。なのでfasの部分を第一引数に、fa-userのuserの部分を第二引数として記述するとアイコンが表示されます。
普通にアイコンを表示させるだけなら上記のやり方で事が足りるのですが、例えばアイコンを押すとユーザー詳細ページに遷移させたいときはインデントに気をつけて以下のように記述します。
= link_to user_path(current_user) do
= icon("fas", "user", class: "user-icon")
ポイントは２つ
- インデントに注意
- link_toメソッドの後にdoを使ってブロックにしてあげることでFontAwesomeが使えるようにする
終わりに
FontAwesomeのような外部サービスと自身のアプリケーションを組み合わせていくのは難しいですが、少しでも参考になったら幸いです。最後まで読んでいただきありがとうございました！
お疲れさまでした。。