Rails:字体真棒图标未使用font-awesome-rails gem显示 [英] Rails: Font awesome icons not showing using font-awesome-rails gem

问题描述

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

I can't seem to find an answer that works for me.

该图标显示为一个框:

The icon shows up as a box: 

我正在使用:

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

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

I imported font-awesome-rails in my application.scss file using:

@import "font-awesome";

这是我为该视图编写的内容:

and here is what I wrote for the view:

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

我尝试过在引导程序之前和之后添加它.

I've tried including it before and after bootstrap.

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

I also tried manually adding the font folder to the pipeline in application.rb

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

清除tmp文件夹似乎也无济于事.

Clearing the tmp folder didn't seem to do anything either.

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

I spent way too much time on this, please help :(

推荐答案

在 Ubuntu 20.04 .

我已经通过这种方式设置了Fontawesome :

首先，我在我的 package.json 文件中添加了Font Awesome:

First I added Font Awesome to my package.json file:

yarn add @fortawesome/fontawesome-free

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

Next, I imported it into my app/javascript/packs/application.js file:

require("@fortawesome/fontawesome-free")

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

Next, I imported it into my app/assets/stylesheets/application.scss file:

$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 宝石:

I also added the Font Awesome 5 Rails gem to my Gemfile:

gem 'font_awesome5_rails'

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

and installed it in my project:

bundle install

最后，我修改了以这种格式调用我的字体图标的位置:

And finally I modified where my fontawesome icons were called from this format:

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

以这种格式

fa_icon('camera-retro')

但是问题是，图标在开发中显示良好，但在生产中却不显示.

But the issue was that the icons were displaying fine in development but not in production.

这是我修复的方式:

问题是我需要将 FontAwesome 5 字体导入到 app/assets/stylesheets/application.scss 文件中.因此，我将其导入到其中:

The issue was that I needed to import the FontAwesome 5 fonts into the app/assets/stylesheets/application.scss file. So I imported this to it:

@import 'font_awesome5_webfont';

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

So my fontawesome import to the app/assets/stylesheets/application.scss file looked like this finally:

@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';

这一次，图标在开发和生产中均正确显示.

This time the icons displayed properly in development as well as production.

注意:请确保在进行了这些更改后重新编译资产并重新启动服务器.

Note: Please ensure to re-compile your assets after making these changes and restart your server.

仅此而已.

我希望这会有所帮助

这篇关于Rails:字体真棒图标未使用font-awesome-rails gem显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！