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的格式使用的复杂堆叠效果。