Ruby on Rails Bootstrap Glyphicons 不起作用

Ruby on Rails Bootstrap Glyphicons not working

提问by user3024194

I have added bootstrap to my site. Here is the structure I am using. (I cannot whatsoever remove the bootstrap.css file since it I modified it to my liking).

我已将引导程序添加到我的网站。这是我正在使用的结构。（我无法删除 bootstrap.css 文件，因为我根据自己的喜好对其进行了修改）。

>app
>>assets
>>>fonts
>>>>4 glypicons icon files.
>>>images
>>>>N/A
>>>javascripts
>>>>Bootstrap.js (Jquery is installed in a gem)
>>>stylesheets
>>>>Bootstrap.css

Everything is imported correctly, but the issue is that the glyphicons arent working and I need them!

一切都正确导入，但问题是字形无法正常工作，我需要它们！

回答by nahtnam

November 2015 EDIT: I would recommend this gem: https://github.com/twbs/bootstrap-sassIt is actively maintained by the Bootstrap community and works really well with Ruby on Rails.

2015 年 11 月编辑：我会推荐这个 gem：https: //github.com/twbs/bootstrap-sass它由 Bootstrap 社区积极维护，并且与 Ruby on Rails 配合得非常好。

I was having a very similar issue as you but I figure it out! Find this part in your bootstrap.css file:

我遇到了和你非常相似的问题，但我想通了！在 bootstrap.css 文件中找到这部分：

@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');
}

and replace ../fonts/with /assets. This is what your final code will look like.

并替换../fonts/为/assets. 这就是您的最终代码的样子。

@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');
}

I hope this helped!

我希望这有帮助！

回答by vladCovaliov

If you are using bootstrap-sass and you have this issue try to import bootstrap like this in one of your scss files. If you use sass, just convert the syntax:

如果您正在使用 bootstrap-sass 并且遇到此问题，请尝试在您的 scss 文件之一中导入这样的 bootstrap。如果使用sass，只需转换语法：

@import "bootstrap-sprockets";
@import "bootstrap";

回答by Langusten Gustel

For me as a twitter-bootstrap-railsuser:

对于我作为twitter-bootstrap-rails用户：

Thanks to take's post @ GitHub

感谢在@GitHub 上发帖

Adding this:

添加这个：

/* 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');
}

to my application.cssfixed the issue.

我application.css解决了这个问题。

Hope to be helpful.

希望有所帮助。

回答by jbmyid

I was also struggling to make boostrap3 glyphicon work in rails 4. I solved it by adding

我也在努力使 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');
}`

to application.css.scssfile and

到application.css.scss文件和

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

to application.rb file.

到 application.rb 文件。

回答by user2262149

I think you might be having a problem with the asset pipeline

我认为您可能在资产管道方面遇到了问题

You want to change bootstrap.cssto bootstrap.css.scssand then replace where it uses

您要更改bootstrap.css为bootstrap.css.scss然后替换它使用的位置

@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');
}

with font-path(look at section 2.3.2 - CSS and Sass)

with 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');
}

Also in your config/environments/production.rb

也在你的 config/environments/production.rb

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

In your config/application.rb

在你的 config/application.rb

# Add the fonts path
config.assets.paths << Rails.root.join('app', 'assets', 'fonts')

Check out another SO postfor a similar problem

查看另一个SO 帖子是否有类似的问题

Hope this helps

希望这可以帮助

回答by Danny

Bootstrap 3 icons look like this:

Bootstrap 3 图标如下所示：

<i class="glyphicon glyphicon-indent-right"></i>

whereas Bootstrap 2 looked like this:

而 Bootstrap 2 看起来像这样：

<i class="icon-indent-right"></i>

If the code you are using isn't up to date (check for a b3 branch), then you may have to fork and change the icon names your self.

如果您使用的代码不是最新的（检查 b3 分支），那么您可能需要 fork 并更改自己的图标名称。

回答by AliInvestor

Apparently Chrome has been broken for months re this issue.

显然，Chrome 在这个问题上已经坏了几个月了。

This worked for me when I put it in the top of my customization_css.css.scss file

当我把它放在我的customization_css.css.scss 文件的顶部时，这对我有用

@import 'bootstrap-sprockets';
@import 'bootstrap';
@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");

回答by Ravi Kashyap

You can also try this:

你也可以试试这个：

@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');
}

You just need to convert your your_css.css file to your_css.css.erb

你只需要将 your_css.css 文件转换为 your_css.css.erb

回答by Danut Codrescu

You can copy all the bootstrap font files to public/fonts and it will work. No need for imports or changes in the application.rb.

您可以将所有引导字体文件复制到 public/fonts 并且它会起作用。无需在 application.rb 中进行导入或更改。

回答by sites

I tried with suggested solution and it did not work for me, here is a generic solutionthat helps you troubleshoot any problem related to this you might have.

我尝试了建议的解决方案，但它对我不起作用，这是一个通用解决方案，可帮助您解决与此相关的任何问题。

Here is the resulting font face definition with bootstrap-sass:

这是使用 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');
}