Question

我是Rails中的font-awesome的新手，我试图找到一种在rails中安装font-awesome pro的简单方法吗？我已经在网上搜索了，但是有很多不清楚的解决方案。有人可以给我一种简单的方法来完成此安装吗？

我有一个专业帐户，

我不想使用CDN，

我正在使用Rails 5.1.4和ruby 2.5.0p0

谢谢

Answer 1

有关“ Rails”的文档确实在Sass中，但这只是因为Rails默认使用Sass。更不用说，original documentation实际上是Sass特有的，因此并不是为Rails量身定制的。

使用Sass，自己托管Font Awesome并允许Sass继承：

下载真棒字体。 Google Hosting Font Awesome Yourself，然后单击第一个结果。下载并解压缩该zip文件。
在Rails项目中添加真棒字体。
- 如果文件夹/vendor/assets/fonts和/vendor/assets/stylesheets不存在，请创建它们。
- 从您的Font Awesome未存档下载中：
  - 将scss放入/vendor/assets/stylesheets并将其重命名为fontawesome。
  - 将webfonts放入/vendor/assets/fonts并将其重命名为fontawesome。

将字体导入Sass。在您的application.scss中（选择了styles），最好在顶部或附近：

$fa-font-path: 'fontawesome';
@import "fontawesome/fontawesome";
@import "fontawesome/<style>"; // for each style you use

编辑样式以正确导入资产。每个样式的scss（即brand.scss）中都有url链接。将每个url更改为asset-url以正确使用Rails资产管道。

预编译字体。可以通过多种方式进行配置，但是我输入了assets.rb：

Rails.application.config.assets.precompile << File.join('fontawesome', /\.(?:svg|eot|woff2?|ttf)\z/.to_s)

示例为nav-home的纯色主页按钮的继承示例：

# /app/assets/stylesheets/application.rb
$fa-font-path: 'fontawesome';
@import "fontawesome/fontawesome";
@import "fontawesome/solid";

.nav-home {
  @extend %fa-icon;
  @extend .fas;

  &:before {
    content: fa-content($fa-var-home);
  }
}

# /app/views/<view>/<view_action>.html.erb
<%= link_to('', root_path, class: 'nav-home') %>

这将成为仅图标的主页按钮。

或者，您可以使用html links or scripts，但是我想您会错过使用Sass继承并真正清理html.erb的机会。

在Rails中使用Font-awesome pro

1 个答案: