字体神器无法加载图标 - Rails 4

Question

我在我的应用程序中使用Twitter Bootstrap，并使用Ruby Gem twitter-bootstrap-rails（2.2.8）。我已经将Rails版本升级到Rails 4。

我正在使用以下Gem来处理资产：

gem 'less-rails'
gem 'coffee-rails'
gem 'twitter-bootstrap-rails'
gem 'execjs'
gem 'therubyracer', :platforms => :ruby

现在的问题是，font awesome 的图标没有加载。根据我的HTML代码应该加载放大镜图标：<button type="submit" class="btn"><i class="icon-search"></i></button>

这是我的bootstrap_and_overrides.css.less文件。

@import "twitter/bootstrap/bootstrap";
@import "twitter/bootstrap/responsive";

// Set the correct sprite paths
@iconSpritePath: asset-path("twitter/bootstrap/glyphicons-halflings");
@iconWhiteSpritePath: asset-path("twitter/bootstrap/glyphicons-halflings-white");

// Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines)
// Note: If you use asset_path() here, your compiled bootstrap_and_overrides.css will not
//       have the proper paths. So for now we use the absolute path.
@fontAwesomeEotPath: asset-path("fontawesome-webfont.eot");
@fontAwesomeEotPath_iefix: asset-path("fontawesome-webfont.eot#iefix");
@fontAwesomeWoffPath: asset-path("fontawesome-webfont.woff");
@fontAwesomeTtfPath: asset-path("fontawesome-webfont.ttf");
@fontAwesomeSvgPath: asset-path("fontawesome-webfont.svg");

// Font Awesome
@import "fontawesome/font-awesome";

// Glyphicons
//@import "twitter/bootstrap/sprites.less";

- Ishank Gupta

---

也许这个问题可以帮到你。 - Emu

这一行怎么样？ 注：如果你在此处使用asset_path()，那么你编译的bootstrap_and_overrides.css将无法正确设置路径。所以目前我们使用绝对路径。你需要使用绝对路径吗？这听起来像是一个可以通过Firebug解决的问题，请检查并查看正在加载什么。 - Petercopter

我已经查看了Firebug，并且看到所有资源都成功加载。 - Ishank Gupta

Answer 1

仍然不确定问题出在哪里，但我已经在我的Gemfile中包含了gem "font-awesome-rails"，并在我的application.css中加入了*= require font-awesome。之后一切都正常了。

- Ishank Gupta

---

一样的情况，@ishank Gupta 的解决方案在安装了 gem 'font-awesome-sass' 的Rails 4.20上有效。 - Galuga

“*= require font-awesome” 不是应该被包含在CSS文件中的有效语句。你对这个答案的意思是什么？ - captainrad

@captainrad - 这是针对Rails资产管道的指令，应该放在application.css文件头部的注释块中。 - Ian Dickinson

Answer 2

你也可以尝试这个：

@font-face {
  font-family: "FontAwesome";
  src: url('<%= asset_path("fontawesome-webfont.eot") %>');
  src: url('<%= asset_path("fontawesome-webfont.eot") + "?#iefix" %>')   format('eot'), url('<%= asset_path("fontawesome-webfont.woff") %>') format('woff'), url('<%= asset_path("fontawesome-webfont.ttf") %>') format('truetype'), url('<%= asset_path("fontawesome-webfont.svg") + "#FontAwesome" %>') format('svg');
  font-weight: normal;
  font-style: normal;
  }

- Ravi Kumar SIngh