我正在学习如何构建 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 图标变成了一个正方形。
我该如何解决这个问题？
【问题讨论】：
标签： ruby-on-rails heroku font-awesome
变成正方形
表示您没有编译支持的webfont（稍后解释）。
您需要确保您拥有compiled your assets，以允许CSS 读取和使用由font-awesome 加载的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（包括漂亮的helpers）：
<%= link_to fa-icon("users", text: "Title"), root_path, class:'navbar-brand' %>
我们使用以下 SASS 文件：
这样做对我们有用——确保你预编译（上面提到过），它应该对你有用。
网络图标
有几个网络图标“框架”（Ionic 和 Font-Awesome 是最受欢迎的）。这些基本上以相同的方式工作——它们有一个自定义字体，它们已经编译成webfont。
然后通过一系列自定义类在您的应用中提供此网络字体。这些类使用:before 伪类为类添加一个特定的字体“字符”（图标）。
因此，当你调用 fa-users 类时，你真的得到了这个：
.fa-users:before {
content: "\f0c0";
}
最重要的是，在引用之前，您需要确保 webfont 和 CSS 样式表都已正确预编译。
【讨论】：
您可以将此代码添加到您的“.scss”文件中，而无需关心任何 gem 或配置内容。
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
【讨论】：
您是否将所有 css 文件正确配置为资产？ 我认为该错误可能是由于资产管道中的样式表 (CSSS) 配置错误而发生的，以下链接有时会帮助您解决问题。
【讨论】：
我有相同的症状（正方形而不是 webfonts），但原因不同。我的原因是我的 CDN 存在 CORS 问题。要查看您是否与我的原因相同，只需打开 Web 控制台并查找类似 @987654321@ 的错误。
【讨论】：
Heroku 找不到字体文件夹。以下是一些帮助我解决相同问题的解决方案：
确保在部署到 Heroku 之前通过 rake assets:precompile 在本地预编译资产。还要检查config.assets.compile = true 上的config/environments/production.rb。
如果这不起作用，您可以随时将 Bootstrap CDN 解决方案包含在布局文件的 <head> 标记中。这提供了相同的解决方案，无需从您的服务器加载文件。：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
【讨论】：