ruby-on-rails - 为什么 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

turns into a square

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

你需要确保你有 compiled your assets , 允许 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-rails gem(这包括不错的 helpers):

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

我们使用以下 SASS 文件:



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

网页图标

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

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

因此，当您调用 fa-users 时类，你真的得到这个:

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

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