rails font-awesome導入

今回はrailsでアイコンことfont-awesomeの導入について説明します。

ツイッター、facebokkといったアイコンをしようしたい場合このgemで導入できます。
今回はhamlとsassの導入した形でやってみます。

gemfile

gemfile

em "font-awesome-sass"

書いた後忘れずターミナルでbundle installします。

sass

applicaiton.sass

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

haml

gemを用いることでfontawsomeアイコンをヘルパーメソッドで導入することができます。
アイコンの名称等はfontawesomeの公式Webページから確認することができます。

haml

  = link_to "https://www.facebook.com/", class: "contents__btn" do
    = icon('fab', 'facebook-square')
    Facebook
  = link_to "https://twitter.com/", class: "contents__btn" do
    = icon('fab', 'twitter')
    Twitter
  = link_to "https://www.instagram.com/", class: "contents__btn" do
    = icon('fab', 'instagram')
    Instagram

導入結果はこちらになります。