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>

我试过在bootstrap之前和之后加入它。

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

中的管道

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

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

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

Answer 1

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

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

首先，我在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 'font_awesome5_rails'

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

bundle install

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

<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文件的惊人的导入看起来像这样：

@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类的.fa属性。

字体真棒图标没有显示使用font-awesome-rails gem

4 个答案: