Bootstrap Glyphicons在Rails上不起作用

Question

在我的Rails5应用程序中，我的application.sass文件中有这个...

/*
 *= require bootstrap-sass-official
 ...
 */

 @font-face
   font-family: 'Glyphicons Halflings'
   src: url('/assets/glyphicons-halflings-regular.eot')
   src: url('/assets/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('/assets/glyphicons-halflings-regular.woff') format('woff'), url('/assets/glyphicons-halflings-regular.ttf') format('truetype'), url('/assets/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg')

根据Ruby on Rails Bootstrap Glyphicons not working中的建议执行...as。我在Chrome控制台上看到这个错误:各种字体格式的Failed to decode downloaded font: http://localhost:3000/assets/glyphicons-halflings-regular.woff，etc..。

我是否需要将任何内容放到我的Rails assets fonts文件夹中？如果有，具体是什么？非常感谢你在这方面的帮助。

Answer 1

由于应用程序是Rails5，更好的方法是将字体放在文件夹app/assets/fonts中。

如果你想把它们放在fonts文件夹之外，你需要添加以下配置：

config.assets.precompile << /\.(?:svg|eot|woff|ttf)\z/

然后可以使用您提到的url。

@font-face {
    font-family: 'Glyphicons Halflings';
    src: url('/assets/glyphicons-halflings-regular.eot');
    src: url('/assets/glyphicons-halflings-regular.eot?iefix') format('eot'),
         url('/assets/glyphicons-halflings-regular.woff') format('woff'),
         url('/assets/glyphicons-halflings-regular.ttf') format('truetype'),
         url('/assets/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}