為什么在Heroku上的我的Rails應用程序中不加載Font-Awesome圖標？

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 （ webfont解釋）。

您需要確保已編譯資產，以允許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（其中包括一些不錯的helper ）：

<%= 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樣式表均已正確預編譯。

Answer 2

您可以將此代碼添加到“ .scss”文件中，而無需關心任何gem或配置內容。

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

Answer 3

您是否已將所有CSS文件正確配置為資產？ 我認為該錯誤可能是由於資產管線中樣式表（CSSS）配置錯誤而引起的，以下鏈接有時會幫助您解決問題。

Answer 4

我有相同的症狀（用正方形代替webfonts），但原因不同。 我的死因是我的CDN發生了CORS問題。 要查看您的原因是否與我的原因相同，只需打開Web控制台並查找諸如Cross-Origin Request Blocked類的錯誤。

Answer 5

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"> 
```