font-awesome-sassを使用する[rails, slim, FontAwesome]

3497 ワード
初心者 FontAwesome Rails slim Rails テキストリンク

参考文献

FontAwesome

Get vector icons and social logos on your website with Font Awesome, the web's most popular icon set and toolkit.
webで人気のあるアイコンセットやツールキットのFontAwesomeを使うことで, ベクターアイコンやソーシャルロゴを取得することができます。
FontAwesome公式サイト: (https://fontawesome.com/)

font-awesome-sass

利用手順

今回はfont-awesome-sassを利用します。

詳細な情報については以下のサイトを参照してください。
https://github.com/FortAwesome/font-awesome-sass

Gemfileに記述
Gemfile
gem 'font-awesome-sass', '~> 5.13.0'
実行

terminalで以下のコマンドを入力

bundle install
application.scssへ記述
app/assets/stylesheets/application.scss
@import "font-awesome-sprockets";
@import "font-awesome";

使用例[slim]

今回使用するアイコン

記述
p
  |
    test
  = icon 'far', 'surprise'
/<p>
/  test
/  <i class="far fa-surprise"></i>
/</p>
出力結果