Ruby on Rails引导字形不起作用

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

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

一切都正确导入,但问题是字形图标无法正常工作,我需要它们!

user3024194 asked 2020-02-19T00:27:23Z
17个解决方案
100 votes

2015年11月编辑:我推荐这个gem:[https://github.com/twbs/bootstrap-sass]它由Bootstrap社区积极维护,并且与Ruby on Rails很好地兼容。

我遇到了与您非常相似的问题,但我发现了! 在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');
}

然后将../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');
}

希望对您有所帮助!

nahtnam answered 2020-02-19T00:27:46Z
45 votes

如果您使用的是bootstrap-sass,则遇到此问题,请尝试将这样的bootstrap导入您的一个scss文件中。 如果使用sass,只需转换语法:

@import "bootstrap-sprockets";
@import "bootstrap";
vladCovaliov answered 2020-02-19T00:28:07Z
36 votes

对于我作为application.css用户:

感谢Take的帖子@ 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解决了这个问题。

希望对您有所帮助。

Langusten Gustel answered 2020-02-19T00:28:44Z
30 votes

我也在努力使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文件。

jbmyid answered 2020-02-19T00:29:13Z
10 votes

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

您想要将config/application.rb更改为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');
}

config/application.rb(请参阅第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/application.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')

查看其他SO帖子以查找类似问题

希望这可以帮助

user2262149 answered 2020-02-19T00:29:59Z
5 votes

Bootstrap 3图标如下所示:

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

而Bootstrap 2看起来像这样:

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

如果您使用的代码不是最新的(检查b3分支),则您可能必须分叉并更改自己的图标名称。

Danny answered 2020-02-19T00:30:28Z
4 votes

显然,Chrome已经在此问题上中断了几个月。

当我将其放在customization_css.css.scss文件的顶部时,这对我有用

@import 'bootstrap-sprockets';
@import 'bootstrap';
@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");
AliInvestor answered 2020-02-19T00:30:52Z
3 votes

您也可以尝试以下操作:

@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

Ravi Kashyap answered 2020-02-19T00:31:17Z
2 votes

根据Bootstrap 3 Glyphicons无法正常工作,Bootstrap定制程序存在一个错误,该错误使glyphicon字体混乱。 我遇到了同样的问题,但是我可以通过从[http://getbootstrap.com/]下载整个引导程序,然后将字体文件复制到正确的位置来解决此问题。

LeoPleurodon answered 2020-02-19T00:31:37Z
2 votes

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

Danut Codrescu answered 2020-02-19T00:31:57Z
2 votes

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

这是带有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');
}
juanpastas answered 2020-02-19T00:32:22Z
1 votes

在带有sass的Rails 4中,Bootstrap 3.2.0和bootstrap-sass gem使用:

@import "bootstrap";
@import "bootstrap/theme";
Marc Durdin answered 2020-02-19T00:32:42Z
0 votes

当我在Rails应用程序中使用bootstrap时,我会使用bootstrap-sass gem。

[https://github.com/thomas-mcdonald/bootstrap-sass]

您可以覆盖它。 只需按照文档说明将其导入即可。 然后导入或粘贴修改后的文件。

在php项目中,该字形不起作用,我下载了经典的Bootstrap zip,然后提取了字形文件以将其替换为项目。 在我的记忆中,当您从他们的网站生成自定义引导样式时,就会出现该错误(错误的来源可能是错误的)。

希望这可以帮助!

coding addicted answered 2020-02-19T00:33:20Z
0 votes

在我的index.html.slim文件中,我将span.glyphicon.glyphicon-calendar替换为span.fa.fa-calendar,并且可以正常工作。

feng answered 2020-02-19T00:33:40Z
0 votes

确保您已设置

# config/environments/production.rb
config.assets.compile = true

并将字体添加到预编译列表

# config/initializers/assets.rb
config.assets.precompile += %w(*.eot *.svg *.ttf *.woff *.woff2)
Deepak Mahakale answered 2020-02-19T00:34:04Z
0 votes

就我而言,我使用的是<i class="icon-plus"></i>,它是从Bootstrap的官方网站上获取的,什么也没看到。 但是相反,有必要使用此<i class="glyphicon glyphicon-plus"></i>

Andrey answered 2020-02-19T00:34:24Z
0 votes

假设您在bootstrap-saas repo中有glyphicons文件(如果没有,则可以从bootstrap-saas repo下载它们),创建app/assets/stylesheets/fonts.scss并添加以下内容:

@font-face {
  font-family: 'Glyphicons Halflings';
  src: font-url('glyphicons-halflings-regular.eot');
  src: font-url('glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
  font-url('glyphicons-halflings-regular.woff') format('woff'),
  font-url('glyphicons-halflings-regular.ttf') format('truetype'),
  font-url('glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
aruanoc answered 2020-02-19T00:34:45Z
translate from https://stackoverflow.com:/questions/20255711/ruby-on-rails-bootstrap-glyphicons-not-working