css - 如何在 Chrome on Rails 中使用 FontAwesome 5？

Question

使用 Rails 6.1.4.1 应用程序并尝试从 FontAwesome 4 升级到 5。

gem 'font-awesome-sass', '~> 5.15.1'

在我的 app/assets/stylesheets/application.scss 文件中:

@import "font-awesome-sprockets";
@import "font-awesome";

通过 icon 或通过 SCSS 使用 FA 不适用于 Chrome 或 Firefox。它在 Safari 中运行良好。

我如何使用它的例子:

.btn-icon {
  @extend .btn;
  &:before {
    font-family: "Font Awesome 5 Free";
    padding-right: .5rem;
  }
}

.btn-new {
  @extend .btn-icon;
  @extend .btn-primary;
  &:before {
    content: "\f067";
  }
}

link_to icon('fas', 'cogs') + t(:quote_sheet_options), ''

图标在 Chrome/FF 中根本不显示 - 这是怎么回事？

更新

如果我如下所示设置我的 css，它就可以工作。但是我仍然无法使用 icon 帮助程序在我的标记中显示任何图标，而且我也无法通过手动添加标记来显示图标。

.btn-icon {
  @extend .btn;
  &:before {
    @extend .fas;
    font-family: "Font Awesome 5 Free";
    padding-right: .5rem;
  }
}

.btn-new {
  @extend .btn-icon;
  @extend .btn-primary;
  &:before {
    @extend .fa-plus;
  }
}

Answer 1

您可以使用 font_awesome5_rails .您将使用的助手不是 icon，而是 fa_icon。 font_awesome5_rails 上有示例，但这里有一个:

fa_icon('camera-retro', class: 'my-class', text: 'Camera', size: '3x')

我希望这对你有用。