Ruby on rails Ruby on Rails引导图标不工作

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

---

所有内容都正确导入，但问题是GlyphIcon不起作用，我需要它们

根据，引导自定义程序有一个bug，它会弄乱glyphicon字体。我也遇到了同样的问题，但我可以通过从下载整个引导程序，然后将字体文件复制到正确的位置来修复它。

我想您可能在

您希望将

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

使用（参见第2.3.2节-CSS和Sass）

也在您的

config/environments/production.rb

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

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

在

config/application.rb中

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

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

#添加字体路径
config.assets.path当我在rails应用程序中使用引导时，我使用引导sass gem


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

在一个php项目中，glyph不起作用，我下载了经典的bootstrap zip，并提取了glyph文件以替换项目中的glyph文件。在我的记忆中，当你从他们的站点生成一个自定义的引导样式时，这个bug就会出现（bug的来源可能是错误的）

希望这有帮助
 2015年11月编辑：我推荐这个gem：它由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');
}

并将
。/font/
替换为
/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');
}

我希望这有帮助
 我也在努力使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.pathBootstrap 3图标如下所示：

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

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



而引导程序2看起来是这样的：

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

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



如果您正在使用的代码不是最新的（请检查b3分支），则您可能必须自行分叉并更改图标名称。
如果您正在使用引导sass，并且出现此问题，请尝试在您的一个scss文件中像这样导入引导。如果使用sass，只需转换语法：

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

在Rails 4中，使用sass、Bootstrap 3.2.0和Bootstrap sass gem时，使用：

@import "bootstrap";
@import "bootstrap/theme";

对于我这个
twitter引导rails
用户：

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

css
修复了这个问题

希望对您有所帮助。
很明显，Chrome在这个问题上已经坏了好几个月了

当我把它放在我的customization_css.css.scss文件的顶部时，它对我起了作用

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

您也可以尝试以下方法：

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

@font-face{
字体系列：“字形图标半身人”；
src:url（“”）；
src:url（''）格式（'embedded-opentype'）、url（''）格式（'woff2'）、url（''）格式（'woff'）、url（''）格式（'truetype'）、url（''）格式（'svg'）；
}

您只需将您的_css.css文件转换为_css.css.erb
您就可以将所有引导字体文件复制到public/font，这样就可以了。不需要在application.rb中导入或更改。
我尝试了建议的解决方案，但它对我不起作用，下面是一个帮助您解决与此相关的任何问题的方法

以下是使用引导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');
}

在我的index.html.slim文件中，我将
span.glyphicon.glyphicon日历
替换为
span.fa.fa日历
，它工作了。
确保您已设置

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

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

# config/initializers/assets.rb
config.assets.precompile += %w(*.eot *.svg *.ttf *.woff *.woff2)

在我的例子中，我使用了这个
，它是我从Bootstrap的一个偶然站点上获取的，我什么也没看到。但是，如果在
app/assets/fonts
中有glyphicons文件（如果没有，可以从下载），则有必要使用此
，创建
app/assets/stylesheets/fonts.scs
并添加以下内容：

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

我已经定制了很多bootstrap.css文件！我不想抹去迄今为止已经完成的任何工作。正确的文件具体在哪里？您根本不必接触css文件。为了解决我的问题，我下载了bootstrap-3.0.2-dist.zip，复制了dist/font文件夹中的所有内容，并替换了我添加到项目中的字体。我使用
bootstrap sass
创建了项目，但这些字体对我不起作用。下载了bootstrap zip并将字体复制到
\stylesheets\font\bootstrap
文件夹中，一切正常。还需要更改我的
config.rb
文件，因为我的站点不在根目录中。我必须将其更改为scss吗？我可以把它留作css文件吗？似乎不起作用。我得到一个错误，说有无效的css。它期望一个{但却得到了一个{("你把它改成了
bootstrap.css.scss
？
font-path
只适用于sassys，我做到了。我会再试一次。我再试了一次，没有错误！我不知道下半年该怎么办。在我的本地机器上，我正在以开发模式运行。没问题。正如你所知，同样的事情也适用于font-awesome。只需将../dir/替换为/assets！如果您使用的是未编译的Less或Sass版本，则可以设置
$icon字体路径：“/assets/”
variable。我在这里使用了一个更好的解决方案：奇怪，因为我的文件位于/assets/font/中，但它可以工作。我尝试了建议的解决方案，但它对我不起作用。这里有一个通用解决方案，可以帮助您解决与此相关的任何问题。您可能有。我个人喜欢这个答案，因为我无法修改我的引导css文件谢谢！我经过数小时的研究，t终于可以工作了。我正在使用引导式sass，但除了SCS之外，我没有任何sass文件。我把它放在哪里