为什么 Font-Awesome 图标无法加载到我在 Heroku 上的 Rails 应用程序中？

Question

我正在学习如何构建 rails 应用程序，请耐心等待这个问题。

我已经使用 'font-awesome-sass' gem 加载了很棒的字体。

在我的 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

Heroku 找不到字体文件夹。这里有几个帮助我解决同样问题的解决方案：

确保在部署到 Heroku 之前通过 rake assets:precompile 在本地预编译您的资产。还要检查 config/environments/production.rb 上的 config.assets.compile = true。
如果这不起作用，您可以随时将 Bootstrap CDN 解决方案包含在布局文件的 <head> 标记中。这提供了相同的解决方案，而无需从您的服务器加载文件。:
```
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
```

Answer 2

您是否已将所有 css 文件正确配置到资产中？我认为错误可能是由于资产管道中样式表（CSSS）的错误配置引起的，以下链接有时会帮助您解决问题。

Rails: Using Font Awesome
Easy ways to get Font Awesome 4.5.0 onto your website

Answer 3

turns into a square

表示您没有编译支持 webfont（稍后解释）。

您需要确保 compiled your assets，以允许 CSS 读取和使用由 font-awesome:[=29 加载的 webfont =]

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

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

为此，我们使用了 font-awesome-rails gem (this includes nice helpers):

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

我们使用以下 SASS 文件：

这样做对我们有用——确保你预编译（如上所述），它应该对你有用。

网络图标

有几个网页图标"frameworks" (Ionic and Font-Awesome are the most popular). These basically work in the same way -- they have a custom font which they've compiled into a webfont.

此网络字体随后可通过一系列自定义 classes 在您的应用程序中使用。这些 classes 使用 :before 伪 class.

将特定字体 "character"（图标）添加到 class

因此，当您调用 fa-users class 时，您真正得到的是：

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

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

Answer 4

您可以将此代码添加到您的“.scss”文件中，而不关心任何 gem 或配置内容。

    @import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");

Answer 5

我有相同的症状（正方形而不是网络字体）但原因不同。我的是由于我的 CDN 的 CORS 问题。要查看您的原因是否与我的相同，只需打开 Web 控制台并查找类似 Cross-Origin Request Blocked.

的错误

为什么 Font-Awesome 图标无法加载到我在 Heroku 上的 Rails 应用程序中？

Why wont Font-Awesome icon load in my Rails App on Heroku?

ruby-on-rails

heroku

font-awesome