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

Posted 2023-02-15

【中文标题】如何在 Chrome on Rails 中使用 FontAwesome 5？

【英文标题】：How to use FontAwesome 5 with Chrome on Rails?

【发布时间】：2021-10-29 11:50:36

【问题描述】：

使用 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;
  

【问题讨论】：

使用的 unicode 可能与 fontawesome 版本不同，因此 unicodes 也需要更新。

我已经检查过我为每个图标使用了正确的 unicode...

好的，指向新版本 fontawesome 的链接是否有效，可能是错字？检查器工具应该可以帮助您查看呈现的源代码。

我使用的是 ruby​​ gem，而不是 FA 的 CDN 链接。

【参考方案1】：

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

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

我希望这对你有用。

【讨论】：

是的，我知道那个宝石。并不是真的想通过这个大型项目并改变我使用过的每个地方icon。