如何在Rails上使用FontAwesome 5和Chrome？

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";

使用 FA 时，无论是通过 icon 还是通过 SCSS，在 Chrome 或 Firefox 上都无法正常工作。但在 Safari 中可以正常工作。

以下是我使用 FA 的示例：

.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;
  }
}

- croceldon

---

Unicode 的使用可能因 FontAwesome 版本不同而有所不同，因此需要更新 Unicode。 - G-Cyrillus

我已经检查过，每个图标都使用了正确的Unicode编码... - croceldon

好的，FontAwesome 新版本的链接是否有效？可能是打错了吧？检查工具可以帮助您查看源代码呈现。 - G-Cyrillus

我正在使用 Ruby Gem，而不是 CDN 链接到 FA。 - croceldon

Answer 1

你可以使用font_awesome5_rails。你需要使用的帮助程序不是icon，而是fa_icon。在font_awesome5_rails上有示例，但这里也有一个示例：

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

我希望这对您有用。

- Muhammed Kılıç

---

是的，我知道那个宝石。但我并不想浏览整个大项目并更改我使用“icon”的每个地方。 - croceldon