1

在 Rails 3.2.1 和 Ruby 1.9.2 上，我在 app/assets/fonts 目录中有 font-awesome.css、font-awesome.min.css 和 font-awesome-ie7.min.css。

这是我正在使用的@import 声明：

@font-face {
    font-family: 'FontAwesome';
    src: url("./fonts/fontawesome-webfont.eot");
    src: url("./fonts/fontawesome-webfont.eot?#iefix") format('embedded-opentype'),
    url("./fonts/fontawesome-webfont.woff") format('woff'),
    url("./fonts/fontawesome-webfont.ttf") format('truetype'),
    url("./fonts/fontawesome-webfont.svg#FontAwesome") format('svg');
    font-weight: normal;
    font-style: normal;
}

我告诉应用程序加载和编译字体文件夹作为 config/application.rb 中资产管道的一部分，如下所示：

config.assets.paths << "#{Rails.root}/app/assets/fonts"

config.assets.precompile += %w( .svg .eot .woff .ttf )

我的 application.css 文件中还有以下内容：

 *= require_self
 *= require_tree .
 *= require ./../fonts/font-awesome

最后，这是我的 HTML：

<i class="icon-facebook"></i>

问题是应该显示图标的地方，而是显示一个小框。我在我的应用程序的主 css 文件中有这个：

i {
  width: 1em;
  height: 1em;
  display:block;
  cursor: pointer;
}

...但这也不显示图标。

font-awesome.css 似乎加载正确，因为这出现在源代码中：

<link href="/assets/font-awesome.css?body=1" media="all" rel="stylesheet" type="text/css">

为什么这些小盒子出现在图标的位置？显然我错过了一些东西......

任何帮助将非常感激。

更新：

仍然不知道为什么上面的方法不起作用，但我最终在我的标签中创建了一个与外部托管的 font-awesome 样式表的链接关系，如下所示：

<link href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet">

我仍然宁愿找到上述问题的解决方案，以防链接网站出现问题。

4

1 回答 1

0

我使用与 Ruby 1.9.3 + bootstrap 和 font-awesome 相同的 rails 版本，并且它工作得很好。如果它可以帮助我做了什么

宝石文件

gem 'bootstrap-sass', '2.2.2.0'
gem 'bootstrap-will_paginate', '0.0.9'
gem 'font-awesome-sass-rails', '3.0.0.1'

在assets/stylesheets application.css.scss添加这一行

 *= require _font-awesome

在assets/javascripts/application.js添加这一行

//= require bootstrap

然后我有一个样式表，我在其中导入 bootstrap 并覆盖我想要的称为' bootstrap-and-overrides.css.scss 在这个文件的顶部（非常第一行）我把

@import "bootstrap";

就是这样……字体真棒显示很好（文本和图标）……

希望这可以帮到你

干杯

于 2013-03-15T09:27:17.227 回答