为什么 Font-Awesome 图标不会加载到 Heroku 上的 Rails 应用程序中？

Question

我正在学习如何构建 Rails 应用程序，所以请耐心回答这个问题。

我已经使用 'font-awesome-sass' gem 加载了 font-awesome。

在我的 CSS 文件中，我加载了 font-awesome：

@import "font-awesome-sprockets";
@import "font-awesome";

当我在本地测试我的应用程序时，这很有效。我正在使用该fa-users图标。我在我的 html 页面中使用以下方法调用它：

<%= link_to root_path, class:'navbar-brand' do %>
  <i class="fa fa-users"></i>
  Title
<% end %>

但是，当我将我的应用程序部署到 Heroku 时，fa-user 图标变成了一个正方形。

我怎样才能解决这个问题？

Answer 1

变成正方形

意味着您没有webfont编译支持（稍后解释）。

您需要确保已编译您的资产，以允许CSS读取和使用webfont加载的资产font-awesome：

$ rake assets:precompile RAILS_ENV=production
$ git add .
$ git commit -a -m "Assets"
$ git push heroku master

我们有几个应用程序font-awesome在 Heroku 生产环境中运行。

为此，我们使用了font-awesome-railsgem（这包括好帮手）：

<%= link_to fa-icon("users", text: "Title"), root_path, class:'navbar-brand' %>

我们使用以下 SASS 文件：

这样做对我们有用——确保你预编译（上面提到的），它应该对你有用。

网页图标

有几个 Web 图标“框架”（Ionic和Font-Awesome是最受欢迎的）。这些基本上以相同的方式工作——它们有一个自定义字体，它们已经编译成webfont。

然后通过一系列自定义类在您的应用程序中提供此 webfont。这些类在带有:before伪类的类之前添加了一个特定的字体“字符”（图标）。

因此，当你打电话给fa-usersclass 时，你真的得到了这个：

.fa-users:before {
  content: "\f0c0";
}

最重要的是，您需要确保webfont在引用之前正确地预编译 和 CSS 样式表。