logo标签列表

Rails: 使用font-awesome-rails gem时，Font Awesome图标不能显示

ruby-on-railsasset-pipelinefont-awesome
7

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

该图标显示为一个方框：

我正在使用：

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文件夹似乎也没有任何作用。
我在这上面浪费了太多时间，请帮忙 :(
1
font-awesome-rails的辅助方法是否有效？只是为了确保您在<i>元素中没有犯错误。例如，如果您将<i>[...]</i>替换为<%= fa_icon('quote-left') %>（假设您正在使用ERB）？ - omnikron
我目前正在使用Redcarpet Markdown生成器将HTML直接包含在我的文章中。该HTML是从Chrome检查中复制的。 - Sunwoo Yang
你在浏览器控制台中看到字体文件加载错误了吗？你确定你的Font Awesome字体文件在assets/fonts文件夹中吗？ - Meer
2
请检查您的app/assets/fonts文件夹。如果没有，请将字体文件移动到该文件夹中，或者第二个选项是删除font-awesome-rails gem并将其放置在head标签中<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> 尝试使用这种方法，应该可以解决问题。 - Meer
是的，我可能只能手动完成这个。感谢您的所有帮助。如果它起作用了，我会告诉您的。 - Sunwoo Yang
显示剩余2条评论
4个回答
4

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

我还将Font Awesome 5 Rails gem加入了我的Gemfile：
gem 'font_awesome5_rails'

我安装了它，并将其应用于我的项目中：

bundle install

最后，我修改了我的字体awesome图标的调用方式，将其格式改为：

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

转换为这种格式
fa_icon('camera-retro')

但问题在于图标在开发环境下正常显示，而在生产环境下却无法正常显示。

这是我如何解决它的方法：

问题在于我需要将FontAwesome 5字体导入到app / assets / stylesheets / application.scss 文件中。所以我将其导入其中： 

@import 'font_awesome5_webfont';

那么我的fontawesome导入到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';

这次在开发和生产环境中，图标正确显示了。

注意：在修改后，请确保重新编译资产并重新启动服务器。

就这些。

希望这可以帮到你。

1
到目前为止，答案完美无缺。 - Milind
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";
0
我通过在样式表中显式声明font-family: FontAwesome;规则来解决了这个问题，因为全局的*样式正在覆盖.fa类的font-family属性。
0
我已经尝试重新启动服务器，甚至尝试从默认的Rails服务器切换到Puma，但都没有成功。导入'font-awesome.css'与导入'font-awesome'有什么区别？无论哪种方式，CSS文件似乎都被连接到application.scss中，没有任何问题。此外，我正在使用'font-awesome'宝石而不是'font-awesome-rails'宝石，因为后者似乎没有得到更新。 - Sunwoo Yang
'font-awesome-rails' 经常更新，我认为你应该使用它。此外，我不认为 'font-awesome.css' 和 'font-awesome' 有任何区别，但最好试一下。 - Rachit Ahuja
谢谢，我会尝试使用Rails宝石。 - Sunwoo Yang
啊，看起来我有点困惑。我确实在使用font-awesome-rails宝石。 - Sunwoo Yang
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接