为什么在Heroku上的我的Rails应用程序中不加载Font-Awesome图标？
[英]Why wont Font-Awesome icon load in my Rails App on Heroku?
问题描述
I'm learning how to build rails apps, so bear with me on this question. 
我正在学习如何构建Rails应用程序，所以请耐心回答这个问题。
I've loaded font-awesome using the 'font-awesome-sass' gem. 我已经使用'font-awesome-sass'gem加载了font-awesome。
In my CSS file, I load font-awesome: 在我的CSS文件中，我加载了font-awesome：
@import "font-awesome-sprockets";
@import "font-awesome";
This works great when I test my app locally. 当我在本地测试我的应用程序时，这非常有用。 I'm using the fa-users icon. 我正在使用fa-users图标。 I call this in my html page using: 我使用以下代码在我的html页面中称呼它：
<%= link_to root_path, class:'navbar-brand' do %>
<i class="fa fa-users"></i>
Title
<% end %>
However, when I deploy my app to Heroku, the fa-user icon turns into a square. 但是，当我将应用程序部署到Heroku时，fa-user图标变成一个正方形。
How can I fix this? 我怎样才能解决这个问题？
5 个解决方案
解决方案1
4 已采纳 2015-12-22 13:33:04
turns into a square
Means you don't have the supporting webfont compiled (explained in a second). 意味着您没有编译支持的webfont （ webfont解释）。
You need to make sure you've compiled your assets , to allow the CSS to both read and use the webfont that's loaded by font-awesome : 您需要确保已编译资产 ，以允许CSS读取和使用font-awesome加载的webfont ：
$ rake assets:precompile RAILS_ENV=production
$ git add .
$ git commit -a -m "Assets"
$ git push heroku master
We have several apps running font-awesome in a Heroku production environment. 我们有一些应用程序在Heroku生产环境中运行font-awesome 。
To do it, we used the font-awesome-rails gem (this includes nice helpers ): 为此，我们使用了font-awesome-rails gem（其中包括一些不错的helper ）：
<%= link_to fa-icon("users", text: "Title"), root_path, class:'navbar-brand' %>
We use the following SASS file: 我们使用以下SASS文件：
Doing this works for us -- make sure you precompile (mentioned above), and it should work for you. 这样做对我们有用 -确保您进行了预编译 （如上所述），并且对您有用。
Web Icons 网页图标
There are several web icon "frameworks" ( Ionic and Font-Awesome are the most popular). 有几个Web图标“框架”（ Ionic和Font-Awesome是最受欢迎的）。 These basically work in the same way -- they have a custom font which they've compiled into a webfont . 这些基本上以同样的方式工作-它们具有自定义的字体，它们已经编译成webfont 。
This webfont is then made available in your app through a series of custom classes. 然后，可以通过一系列自定义类在您的应用程序中使用此webfont。 These classes prepend a specific font "character" (icon) to the class with the :before pseudoclass. 这些类使用:before伪类为该类添加特定的字体“字符”（图标）。
Thus, when you call fa-users class, you're really getting this: 因此，当您调用fa-users类时，您实际上得到了以下信息：
.fa-users:before {
content: "\f0c0";
}
The bottom line is that you need to make sure both the webfont and the CSS stylesheets are precompiled properly before referencing either. 最重要的是，您需要确保在引用之前， webfont和CSS样式表均已正确预编译。
解决方案2
2 2015-12-22 13:44:22
您可以将此代码添加到“ .scss”文件中，而无需关心任何gem或配置内容。
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
解决方案3
1 2015-12-22 05:09:42
Have you configured all css files into assets properly ? 您是否已将所有CSS文件正确配置为资产？ I think the error may happens due to faulty configuration of style sheets (CSSS) in assets pipline, the following links will help you sometimes to solve the issue. 我认为该错误可能是由于资产管线中样式表（CSSS）配置错误而引起的，以下链接有时会帮助您解决问题。
解决方案4
1 2016-07-06 16:18:13
I had the same symptom (squares instead of webfonts) but a different cause. 我有相同的症状（用正方形代替webfonts），但原因不同。 Mine was due to a CORS issue with my CDN. 我的死因是我的CDN发生了CORS问题。 To see if you have the same cause as mine, just open the web console and look for errors like Cross-Origin Request Blocked . 要查看您的原因是否与我的原因相同，只需打开Web控制台并查找诸如Cross-Origin Request Blocked类的错误。
解决方案5
0 2015-12-22 04:51:35
Heroku can't find the font folders. Heroku找不到字体文件夹。 Here are a couple of solutions that helped me tackle same problem : 这里有一些解决方案可以帮助我解决相同的问题：
Make sure you precompile your assets locally via
rake assets:precompilebefore deploying to Heroku.在部署到Heroku之前，请确保通过rake assets:precompile在本地预编译资产。 Also checkconfig.assets.compile = trueonconfig/environments/production.rb.还要在config/environments/production.rb上检查config.assets.compile = true。If that doesn't work, you can always go for Bootstrap CDN solution to be included in
<head>tag of your layout files.如果这不起作用，则始终可以将Bootstrap CDN解决方案包含在布局文件的<head>标记中。 This provides the same solution without loading the files from your server.:这提供了相同的解决方案，而无需从服务器加载文件。 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.