Ruby on Rails

Font Awesome 有一个官方的 Ruby on Rails gem，用于免费和专业图标。

如何安装

安装免费版和专业版的方式不同。

将 Font Awesome Ruby gem 添加到您的 Gemfile 中

专业版

source "https://token:[email protected]/basic/fontawesome-pro/ruby/" do
  gem "font-awesome-pro-sass", "VERSION"
end

免费版

gem "font-awesome-sass", "~> VERSION"

---

打包时间

在终端和您的项目文件夹中

 bundle install

---

导入 Font Awesome

将以下内容添加到 app/assets/stylesheets/application.css.scss 文件中

专业版

@import "font-awesome-pro";

免费版

@import "font-awesome";

嗯，`application.css.scss` 文件在哪里？

如果 app/assets/stylesheets/application.css.scss 不存在，则重命名 app/assets/stylesheets/application.css 并将 @import "font-awesome" 语句添加到 *= require 语句下方，但在注释块之外。

样式时间

接下来，您需要选择要在项目中使用哪种图标样式。您可以导入任意数量的样式。Font Awesome 有以下样式

专业版

@import "font-awesome-pro/brands";
@import "font-awesome-pro/solid";
@import "font-awesome-pro/regular";
@import "font-awesome-pro/light";
@import "font-awesome-pro/thin";
@import "font-awesome-pro/duotone";
@import "font-awesome-pro/sharp-solid";

免费版

# Nothing additional needed to install for free icons.
# Brands, free solid, and free regular icons are included with the import above.

---

添加这些图标

该动手了！

专业版

<i class="fa-solid fa-alien"></i>
<i class="fa-regular fa-alien"></i>
<i class="fa-light fa-alien"></i>
<i class="fa-thin fa-alien"></i>
<i class="fa-duotone fa-alien"></i>
<i class="fa-sharp fa-solid fa-alien"></i>

免费版

<i class="fa-brands fa-font-awesome"></i>
<i class="fa-solid fa-user-secret"></i>
<i class="fa-regular fa-bell"></i>

感觉不错，使用 Rails 助手函数添加图标

专业版

<%= icon('fa-solid', 'alien')%>
<%= icon('fa-regular', 'alien')%>
<%= icon('fa-light', 'alien')%>
<%= icon('fa-thin', 'alien')%>
<%= icon('fa-duotone', 'alien')%>
<%= icon('fa-solid fa-sharp', 'alien')%>

免费版

<%= icon('fa-brands', 'font-awesome')%>
<%= icon('fa-solid', 'user-secret')%>
<%= icon('fa-regular', 'bell')%>

---

好的，停止，动画，并听

想要 动画 或更改图标的 大小 吗？以下是方法

专业版

<i class="fa-thin fa-user-secret fa-7x fa-beat"></i>

免费版

<i class="fa-solid fa-user-secret fa-7x fa-flip"></i>

或者使用 Rails 助手函数进行动画

专业版

<%= icon('fa-thin', 'alien', class:"fa-7x fa-bounce")%>
<%= icon('fa-light', 'font-awesome', 'Font Awesome', id: 'my-icon', class: 'fa-shake')%>
<%= icon('fad', 'font-awesome', 'Font Awesome', id: 'my-icon', class: 'fa-beat')%>

免费版

<%= icon('fa-solid', 'user-secret', class:"fa-7x, fa-shake")%>
<%= icon('fa-brands', 'font-awesome', 'Font Awesome', id: 'my-icon', class: 'fa-shake')%>
<%= icon('fab', 'font-awesome', 'Font Awesome', id: 'my-icon', class: 'fa-beat')%>

注意：图标助手可以接受一个选项哈希，该选项将传递给 content_tag 助手

---

其他 Ruby 项目

path.scss 文件包含一个用于使用 font-path 函数（如果找到）的函数。如果没有找到该函数，它将使用 $fa-font-path 变量作为webfont 文件的路径。您可以覆盖此变量以指定框架存储webfont 文件的位置。