【问题标题】:Rails 4.2 / Bootstrap 3 : trying to use font-awesome ... wo successRails 4.2 / Bootstrap 3:尝试使用 font-awesome ... wo 成功
【发布时间】:2015-11-15 15:23:31
【问题描述】:

我正在尝试使用 font-awesome,但在运行时,我收到以下错误

ActionController::RoutingError (No route matches [GET] "/assets/fonts/font-awesome/fontawesome-webfont.woff"):
....
ActionController::RoutingError (No route matches [GET] "/assets/fonts/font-awesome/fontawesome-webfont.ttf"):
....
ActionController::RoutingError (No route matches [GET] "/assets/fonts/font-awesome/fontawesome-webfont.svg"):

在我的 Gemfile 中,我有:

 gem "font-awesome-rails"  # https://github.com/bokmann/font-awesome-rails

在我的 framework_and_overrides.css.scss 我有:

// import the CSS framework
@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome";

在我的 application.css 我有:

/*
...
*= require font-awesome
*= require dashboard/framework_and_overrides
....
*/

我在我的application.rb中添加了:

config.assets.paths << Rails.root.join("app", "assets", "fonts")

我运行 rake assets:clobber ,从干净的基础上开始 .. 现在,同样的错误

感谢您的启发......

【问题讨论】:

标签: ruby-on-rails-4 twitter-bootstrap-3 font-awesome-4


【解决方案1】:

从 application.css 中删除:

*= require font-awesome

在您的 framework_and_overrides.css.scss 底部添加以下行:

@import "font-awesome-sprockets";
@import "font-awesome";

更新

事实证明,您的资产路由存在问题。 Rails 会根据资产是否预编译来创建路径。在所有情况下(生产和开发)都可以正常工作的最安全方法是将路由放在 font_url 中,如下所示:

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

或者,您可以链接外部样式表(性能可能会变差):

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

【讨论】:

  • 感谢您的建议,我猜您的目标是 gem 'font-awesome-sass' ( sprockets does not work w font-awesome-rails gem... ( 我试过 ) 我删除了 require ,我添加了2条导入行和asset.precompile...但是,同样的错误,同样的消息......顺便说一句,在开发模式下,不执行预编译不是吗?......
  • 我想我发现了错误:在我的 style.css 中,我有 @font-face { font-family: 'FontAwesome'; src: url('../fonts/font-awesome/fonts/fontawesome-webfont.eot?v=4.1.0'); src: url('../fonts/font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') 格式('embedded-opentype'), url('../fonts/font-awesome /fonts/fontawesome-webfont.woff?v=4.1.0') 格式('woff'), url('../fonts/font-awesome/fonts/fontawesome-webfont.ttf?v=4.1.0')格式('truetype'), url('../fonts/font-awesome/fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') 格式('svg'); } ...网址错误!!!!
  • 我刚刚更新了解决方案。让我知道这是否有效
  • 就是这样......谢谢你的回答......它正在运行 fien,我摆脱了这个@font-face css条目......(我正在重用模板......)一切都是由 font-awesome-sass gem 处理 ....
猜你喜欢
  • 2014-06-02
  • 2012-06-18
  • 2018-10-11
  • 2013-08-31
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-11-30
  • 1970-01-01
相关资源
最近更新 更多