fontawesomeの使い方

ちょっとカリキュラムで使ったくらいで、個人的にfontawesome使ってなかったな、と思ったので一回まとめた方がいいだろう。ちなみにfontawesomeまとめようと思ったきっかけはある記事読んでて%i.fas.fa-chevron-downって何やねんって思ったから。

iはiconでfasはfontawesomeの略なんだろうけどそのあとfaって続く物がたくさんあるがfaって何やろう?chevronは要はやま型(正確には軍服とかの一部らしいけど)。なんでfas.fa-chevron-downは下向きのアイコンだった。

正直hamlは見慣れない物が出た時なんなのかわかりづらいから普通にhtmlで書くと

<i class=”fas fa-chevron-down”></i>ってこと。

あとは普通にgemインストールしてapplication.scssとかに

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

 

 を書いとく。font-awesomeは忘れないと思うけどfont-awesome-sprockets忘れると全部四角で表示されるので注意。

hamlだったら

%i.fas.fa-chevron-down
%i.fas.fa-truck

 

って感じでi(アイコン)タグのクラスにしてもいいし、

= fa_icon 'home', class:'icon'って感じで表示もできるみたい。

https://qiita.com/4npei/items/0a5f28365f66ed1baf17

 

 

追記予定

 

参考記事

簡単に使うならこの記事が良さそう

https://web-camp.io/magazine/archives/27886