FontAwesome::Sass(5.x版)使用帮助。

FontAwesome::Sass(5.x版)

https://fontawesome.com/icons?d=gallery&m=free

只能使用免费的。

在app/assets/stylesheets/application.scss中载入

@import "font-awesome-sprockets"; 

@import "font-awesome";

Rails Helper usage:

三种格式的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属性。

Sizing Icons

相对的大小

图标继承父容器的 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的格式使用的复杂堆叠效果。