Ruby on Rails Bootstrap Glyphicons 不工作

Posted 2023-03-15

【中文标题】Ruby on Rails Bootstrap Glyphicons 不工作

【英文标题】：Ruby on Rails Bootstrap Glyphicons not working

【发布时间】：2013-12-13 21:02:14

【问题描述】：

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

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

一切都正确导入，但问题是字形图标不起作用，我需要它们！

【参考方案1】：

假设您在app/assets/fonts 中有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');

【参考方案2】：

你也可以试试这个：

@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

【讨论】：

是的，因为资产的生产路径包括哈希摘要。即使在提出这个问题的时候，这也应该是正确的答案。感觉就像 gem 中的代码永远不应该工作

我的资产路径因 bootstrap 的纱线安装而不同：src: url('<%= asset_path("bootstrap/fonts/glyphicons-halflings-regular.eot") %>');

【参考方案3】：

在我的例子中，我使用了这个 <i class="icon-plus"></i>，我从 Bootstrap 的官方网站获取，但没有看到任何东西。但相反，必须使用这个<i class="glyphicon glyphicon-plus"></i>

【参考方案4】：

确保你已经设置

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

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

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

【参考方案5】：

在我的 index.html.slim 文件中，我将 span.glyphicon.glyphicon-calendar 替换为 span.fa.fa-calendar 并且它起作用了。

【参考方案6】：

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

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

【参考方案7】：

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

【参考方案8】：

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

我希望这会有所帮助！

【讨论】：

没问题。正如你所知道的，同样的事情也适用于字体真棒。只需将 ../dir/ 替换为 /assets！

如果你使用的是非编译的Less或Sass版本，你可以设置$icon-font-path: "/assets/"变量。

我在这里遵循了一个更好的解决方案：***.com/questions/21962775/…

奇怪，因为我的文件在 /assets/fonts/ 但它可以工作

我尝试了建议的解决方案，但它对我不起作用，这是一个通用解决方案，可帮助您解决与此相关的任何问题，您可能遇到***.com/a/40898227/1197775

【参考方案9】：

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

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

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

【讨论】：

谢谢。添加@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"); 对我有用。你知道为什么吗？

【参考方案10】：

对于我作为twitter-bootstrap-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');

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

希望对您有所帮助。

【讨论】：

在 Rails 4 中为我工作，谢谢。 bootstrap_and_overrides.css.less 中有一条注释，用于启用字形图标，但它不起作用:(

谢谢！！我已经为此苦苦挣扎了好几个小时

这对我在 localhost 上也有效，但在 Heroku 上无效。我发现上面@sadfuzzy 提到的评论（在（对我而言）：/app/assets/stylesheets/bootstrap_and_overrides.css）是这项工作的关键。对于 Font Awesome，您使用：“=require twitter-bootstrap-static/fontawesome”，对于 Glyphicons，您使用：“=require twitter-bootstrap-static/sprites”。

根据 twitter-bootsrap-rails 文档，要启用 Glyphicons，请将以下内容添加到 bootstrap_and_overrides.css.less 文件中：@glyphiconsEotPath: font-url("glyphicons-halflings-regular.eot"); @glyphiconsEotPath_iefix: font-url("glyphicons-halflings-regular.eot?#iefix"); @glyphiconsWoffPath: font-url("glyphicons-halflings-regular.woff"); @glyphiconsTtfPath: font-url("glyphicons-halflings-regular.ttf"); @glyphiconsSvgPath: font-url("glyphicons-halflings-regular.svg#glyphicons_halflingsregular"); @import "twitter/bootstrap/glyphicons.less";

【参考方案11】：

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

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

【讨论】：

我正在使用 bootstrap-sass，但是除了 scss 之外我没有任何 sass 文件。我把这个放在哪里？它在 scss 文件中不起作用。

我想通了。他们需要在行尾加上分号的引号。在此之后，我注意到网站的行为发生了一些变化。

@Confusion 这里提到应该导入它才能使图标工作：github.com/twbs/bootstrap-sass#a-ruby-on-rails

当。是的，这是我的问题。这对我来说也很愚蠢，因为bootstrap-sass 的文档clearly states 你需要在boostrap 之前导入bootstrap-sprockets，我什至记得读过它，但由于某种原因，我的文件中没有它代码。哦，好吧......我猜是生活和学习。

【参考方案12】：

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

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

【参考方案13】：

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

【讨论】：

我个人喜欢这个答案，因为我无法修改我的引导 css 文件

谢谢！经过数小时的研究 T.T

它终于起作用了

【参考方案14】：

Bootstrap 3 图标如下所示：

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

而 Bootstrap 2 看起来像这样：

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

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

【参考方案15】：

当我在我的 rails 应用程序中使用 bootstrap 时，我使用 bootstrap-sass gem。

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

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

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

希望这会有所帮助！

【参考方案16】：

我认为您的asset pipeline 可能有问题

您想将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');

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

查看另一个 SO post 是否有类似问题

希望对你有帮助

【讨论】：

我必须将其更改为 scss 吗？我可以将其保留为 css 文件吗？

似乎不起作用。我收到一条错误消息，提示 CSS 无效。它期望一个 但得到一个 ("

你改成bootstrap.css.scss了吗？ font-path 仅适用于 SASS

是的，我做到了。我会再试一次。

我又试了一次，没有错误！我不知道下半场要做什么。在我的本地机器上，我正在开发模式下运行。

【参考方案17】：

根据Bootstrap 3 Glyphicons are not working 的说法，Bootstrap 定制器存在一个错误，它会弄乱 glyphicon 字体。我遇到了同样的问题，但我可以通过从 http://getbootstrap.com/ 下载整个引导程序来解决它，然后将字体文件复制到正确的位置。

【讨论】：

好吧，我已经自定义了很多 bootstrap.css 文件！我不想抹去迄今为止所做的任何工作。正确的文件到底在哪里？

您根本不需要接触 css 文件。为了解决我的问题，我下载了 bootstrap-3.0.2-dist.zip，复制了 dist/fonts 文件夹中的所有内容，并替换了我添加到项目中的字体。

我使用bootstrap-sass 创建了我的项目，但字体不适合我。下载 bootstrap zip 并将字体复制到 \stylesheets\fonts\bootstrap 文件夹中，一切都很好。还需要更改我的config.rb 文件，因为我的站点不在根目录中。