FontAwesome::Sass(5.x版)
https://fontawesome.com/icons?d=gallery&m=free
只能使用免費的。
在app/assets/stylesheets/application.scss中載入
@import "font-awesome-sprockets";
@import "font-awesome";
三種格式的icon:
- solid (
fas) , 字體是黑色，背景色可以改變。 - regular (
far) - brands (
fab)
在rails的view中使用：
icon("fas", 'flag') #=> <i class="fas fa-flag"></i>
icon('fab',
'font-awesome',
'Font Awesome'
,
id: 'my-icon', class: 'strong fa-2x' style: "background: xxx")
第一個參數是style prefix，第二個參數是圖標的名字，第三個是顯示在屏幕上的text. 后面增加了id和class, style特性。
⚠️icon helper可以接受一個hash的options，會被傳遞給content_tag helper
也可以使用原生HTML基本使用：<i>, <span>
可以使用color, font-size，background等css屬性。
相對的大小
圖標繼承父容器的 font-size , <i>以此為基礎，使用fa-*來改變尺寸。
例子：
<div style="font-size: 0.5rem;"> <i class="fas fa-stroopwafel fa-xs"></i> <i class="fas fa-stroopwafel fa-sm"></i> <i class="fas fa-stroopwafel fa-lg"></i> <i class="fas fa-stroopwafel fa-2x"></i>
Lcons in a list: （點擊看案例）
可以為ul/li設定fa-ul和fa-li，讓列表中的點的圖標被替代掉。
改變圖標的方向 ：rotation
fa-roate-{90|180|270|vertical|horizontal}
快速旋轉圖標：fa-spin
讓圖標被文字環繞，並放在左上或者右上角：
fa-pull-left ,fa-pull-right：
fa-border: 給圖標加一個白色邊框
<i class="fas fa-quote-left fa-2x fa-pull-left"></i>
| Gatsby believed in the green light, the orgastic future that year by year
高級用法：讓圖標堆疊，顯示特別的效果。 還有需要svg+js的格式使用的復雜堆疊效果。