Ruby on Rails Bootstrap Glyphicons无法正常工作
我已经添加bootstrap到我的网站。 这是我正在使用的结构。 （我不能删除bootstrap.css文件，因为我修改了我的喜好）。
>app >>assets >>>fonts >>>>4 glypicons icon files. >>>images >>>>N/A >>>javascripts >>>>Bootstrap.js (Jquery is installed in a gem) >>>stylesheets >>>>Bootstrap.css 一切正常导入，但问题是，glyphicons不工作，我需要他们！
2015年11月编辑：我会推荐这个gem： https : //github.com/twbs/bootstrap-sass它由Bootstrap社区积极维护，并与Ruby on Rails的工作得很好。
我和你有一个非常相似的问题，但我知道了！ 在你的bootstrap.css文件中find这个部分：
@font-face { font-family: 'Glyphicons Halflings'; src: url('../fonts/glyphicons-halflings-regular.eot'); src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg'); }
并用/assetsreplace../fonts/ 。 这就是你的最终代码的样子。
@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'); }
我希望这有助于！
如果你正在使用bootstrap-sass并且你有这个问题，请尝试在你的scss文件之一中导入像这样的bootstrap。 如果您使用sass，只需转换语法：
@import "bootstrap-sprockets"; @import "bootstrap";
对于我作为twitter-bootstrap-rails用户：
感谢@ GitHub
添加这个：
/* Override Bootstrap 3 font locations */ @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'); }
我的application.css修复了这个问题。
希望能有所帮助。
我也努力使boostrap3 glyphicon在rails 4中工作。我通过添加解决了它
@font-face { font-family: 'Glyphicons Halflings'; src: url(asset_path('glyphicons-halflings-regular.eot')); src: url(asset_path('glyphicons-halflings-regular.eot?#iefix')) format('embedded-opentype'), url(asset_path('glyphicons-halflings-regular.woff')) format('woff'), url(asset_path('glyphicons-halflings-regular.ttf')) format('truetype'), url(asset_path('glyphicons-halflings-regular.svg#glyphicons_halflingsregular')) format('svg'); }`
到application.css.scss文件和
config.assets.paths << "#{Rails}/vendor/assets/fonts"
到application.rb文件。
我认为你可能在资产pipe道方面有问题
您想要将bootstrap.css更改为bootstrap.css.scss ，然后replace它使用的位置
@font-face { font-family: 'Glyphicons Halflings'; src: url('../fonts/glyphicons-halflings-regular.eot'); src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg'); }
与font-path （请参阅第2.3.2节 – CSS和Sass）
@font-face { font-family: 'Glyphicons Halflings'; src: font-path('glyphicons-halflings-regular.eot'); src: font-path('glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), font-path('glyphicons-halflings-regular.woff') format('woff'), font-path('glyphicons-halflings-regular.ttf') format('truetype'), font-path('glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg'); }
另外在你的config/environments/production.rb
# Precompile additional assets config.assets.precompile += %w( .svg .eot .woff .ttf )
在你的config/application.rb
# Add the fonts path config.assets.paths << Rails.root.join('app', 'assets', 'fonts')
检查出另一个SOpost ，以解决类似的问题
希望这可以帮助
Bootstrap 3图标如下所示：
<i class="glyphicon glyphicon-indent-right"></i>
而Bootstrap 2看起来像这样：
<i class="icon-indent-right"></i>
如果您使用的代码不是最新的（检查一个b3分支），那么您可能需要分叉并更改自己的图标名称。
显然Chrome已经打破了几个月的问题。
当我把它放在我的customization_css.css.scss文件的顶部时，这对我有效
@import 'bootstrap-sprockets'; @import 'bootstrap'; @import url("bootstrap/3.0.0/css/bootstrap.min.css");
根据Bootstrap 3 Glyphicons不能正常工作 ，Bootstrap自定义程序存在一个错误，它会弄乱graphics字体。 我有同样的问题，但我可以通过从http://getbootstrap.com/下载整个bootstrap，然后将字体文件复制到正确的位置来修复它。;
在Rails 4中，使用sass，Bootstrap 3.2.0和bootstrap-sass gem使用：
@import "bootstrap"; @import "bootstrap/theme";
你也可以试试这个：
@font-face { font-family: 'Glyphicons Halflings'; src: url('<%= asset_path("glyphicons-halflings-regular.eot") %>'); src: url('<%= asset_path("glyphicons-halflings-regular.eot?#iefix") %>') format('embedded-opentype'), url('<%= asset_path("glyphicons-halflings-regular.woff2") %>') format('woff2'), url('<%= asset_path("glyphicons-halflings-regular.woff") %>') format('woff'), url('<%= asset_path("glyphicons-halflings-regular.ttf") %>') format('truetype'), url('<%= asset_path("glyphicons-halflings-regular.svg#glyphicons_halflingsregular") %>') format('svg'); }
你只需要将你的your_css.css文件转换为your_css.css.erb
你可以复制所有的引导字体文件到公共/字体，它会工作。 无需导入或更改application.rb。
我试着用build议的解决scheme，它并没有为我工作，这是一个通用的解决scheme ，可以帮助您解决任何与此相关的问题，你可能有。
下面是使用bootstrap-sass生成的字体定义：
@font-face { font-family: 'Glyphicons Halflings'; src: asset-url('bootstrap/fonts/glyphicons-halflings-regular.eot'); src: asset-url('bootstrap/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), asset-url('bootstrap/fonts/glyphicons-halflings-regular.woff') format('woff'), asset-url('bootstrap/fonts/glyphicons-halflings-regular.ttf') format('truetype'), asset-url('bootstrap/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg'); }
当我在我的rails应用程序中使用bootstrap时，我使用bootstrap-sass gem。
https://github.com/thomas-mcdonald/bootstrap-sass
你可以覆盖它。 只需将其作为文档解释即可导入。 然后导入或粘贴您的修改文件。
在一个php项目中，字形不能正常工作，我下载了经典的bootstrap zip，并且提取了字形文件以replace项目中的字形文件。 在我的记忆中，当你从他们的站点生成一个自定义的引导样式时，就会出现这个错误（错误的来源可能是错误的）。
希望这可以帮助！
在我的index.html.slim文件中，我用span.glyphicon.glyphicon-calendarreplace了span.fa.fa-calendar ，并且工作正常。
确保你已经设置好了
# config/environments/production.rb config.assets.compile = true
并将字体添加到预编译列表中
# config/initializers/assets.rb config.assets.precompile += %w(*.eot *.svg *.ttf *.woff *.woff2)
在我的情况下，我使用了这个<i class="icon-plus"></i> ，这是我从Bootstrap的官方站点拿来的，没有看到任何东西。 但相反，使用这个<i class="glyphicon glyphicon-plus"></i>
