Rails：字体真棒图标未使用 font-awesome-rails gem 显示

Question

我似乎找不到适合我的答案。

图标显示为一个框：

我正在使用：

font-awesome-rails (4.6.2.0)
rails (4.2.3)

我使用以下命令在 application.scss 文件中导入了 font-awesome-rails：

@import "font-awesome";

这是我为视图编写的内容：

<i class="quote-left fa fa-quote-left"></i>

我试过在引导之前和之后包括它。

我还尝试将字体文件夹手动添加到 application.rb 中的管道

config.assets.paths << Rails.root.join("app", "assets", "fonts")

清除 tmp 文件夹似乎也没有做任何事情。

我花了太多时间在这上面，请帮忙:(

Answer 1

我在Ubuntu 20.04 中使用Rails 6和Bootstrap 4时遇到了这个问题。

我以这种方式设置了 Fontawesome ：

首先，我将 Font Awesome 添加到我的package.json文件中：

yarn add @fortawesome/fontawesome-free

接下来，我将它导入到我的app/javascript/packs/application.js文件中：

require("@fortawesome/fontawesome-free")

接下来，我将它导入到我的app/assets/stylesheets/application.scss文件中：

$fa-font-path: '@fortawesome/fontawesome-free/webfonts';
@import '@fortawesome/fontawesome-free/scss/fontawesome';
@import '@fortawesome/fontawesome-free/scss/brands';
@import '@fortawesome/fontawesome-free/scss/solid';
@import '@fortawesome/fontawesome-free/scss/regular';
@import '@fortawesome/fontawesome-free/scss/v4-shims';

我还在我的 Gemfile 中添加了Font Awesome 5 Rails gem：

gem 'font_awesome5_rails'

并将其安装在我的项目中：

bundle install

最后，我修改了从这种格式调用我的 fontawesome 图标的位置：

<i class="fas fa-camera-retro"></i>

到这种格式

fa_icon('camera-retro')

但问题是图标在开发中显示良好，但在生产中显示不正常。

这是我修复它的方法：

问题是我需要将FontAwesome 5字体导入app/assets/stylesheets/application.scss文件。 所以我把这个导入到它：

@import 'font_awesome5_webfont';

所以我对app/assets/stylesheets/application.scss文件的 fontawesome 导入最终看起来像这样：

@import 'font_awesome5_webfont';
$fa-font-path: '@fortawesome/fontawesome-free/webfonts';
@import '@fortawesome/fontawesome-free/scss/fontawesome';
@import '@fortawesome/fontawesome-free/scss/brands';
@import '@fortawesome/fontawesome-free/scss/solid';
@import '@fortawesome/fontawesome-free/scss/regular';
@import '@fortawesome/fontawesome-free/scss/v4-shims';

这次图标在开发和生产中都能正确显示。

注意：请确保在进行这些更改后重新编译您的资产并重新启动您的服务器。

仅此而已。

我希望这会有所帮助

Answer 2

我将我的 font-awesome 导入移到了我的字体导入下方并解决了它。

从此：

@import "font-awesome"; 
@import url("https://fonts.googleapis.com/css?family=Playfair+Display:700,900");

对此：

@import url("https://fonts.googleapis.com/css?family=Playfair+Display:700,900");
@import "font-awesome";

Answer 3

在将@import 'font-awesome.css' 添加到application.scss后，尝试重新启动您的网络服务器。

还请阅读这些，如果你还没有，

https://github.com/bokmann/font-awesome-rails/issues/130#issuecomment-95308175

https://github.com/bokmann/font-awesome-rails/issues?q=is%3Aissue+is%3Aclosed

Answer 4

我通过明确声明一个font-family: FontAwesome;解决了这个问题font-family: FontAwesome; 我的样式表中的规则，因为全局*样式覆盖了.fa类的font-family属性。