带有引导程序 3.3.4 的字形图标在 rails 4.2.1 中不起作用

Posted 2023-03-15

【中文标题】带有引导程序 3.3.4 的字形图标在 rails 4.2.1 中不起作用

【英文标题】：Glyphicons with bootstrap 3.3.4 not working in rails 4.2.1

【发布时间】：2015-06-08 00:00:42

【问题描述】：

我有使用 bootstrap 3.3.x 和 glyphicons 的 rails 4.2.1 应用程序。我不能使用 boostrap-sass 或任何其他 gem 来集成 bootstrap 和 rails，因为原来的 bootstrap.css 已经被设计师修改了。我还有一个 custom.css 文件。

我已将所有 css 文件（应用程序、引导程序和自定义）重命名为使用 scss 格式。目前，引导 css 工作正常，但未显示字形图标。我已将 bootstrap.scss 中的字体代码替换为

@font-face 
  font-family: 'Glyphicons Halflings';
  src: url(font-path('glyphicons-halflings-regular.eot'));
  src: url(font-path('glyphicons-halflings-regular.eot?#iefix')) format('embedded-opentype');
  src: url(font-path('glyphicons-halflings-regular.woff2')) format('woff2');
  src: url(font-path('glyphicons-halflings-regular.woff')) format('woff');
  src: url(font-path('glyphicons-halflings-regular.ttf')) format('truetype');
  src: url(font-path('glyphicons-halflings-regular.svg#glyphicons_halflingsregular')) format('svg');

以前（fontawesome + rails 4.0.1 not working），我确实将 rails 中的 scss 文件配置为使用不同的字体，并且确实有效。我在当前的 rails 应用程序中尝试了相同的方法，但无法弄清楚它失败的原因。这里(https://github.com/prasadsurase/rails-fonts.git) 是一个用于检查问题的示例 Rails 应用程序。

感谢您的任何建议。

【参考方案1】：

您的 SCSS 有错误。 @font-face 应声明如下：

@font-face 
  font-family: 'Glyphicons Halflings';
  src: url(font-path('glyphicons-halflings-regular.eot'));
  src: url(font-path('glyphicons-halflings-regular.eot?#iefix')) format('embedded-opentype'),
       url(font-path('glyphicons-halflings-regular.woff2')) format('woff2'),
       url(font-path('glyphicons-halflings-regular.woff')) format('woff'),
       url(font-path('glyphicons-halflings-regular.ttf')) format('truetype'),
       url(font-path('glyphicons-halflings-regular.svg#glyphicons_halflingsregular')) format('svg');

请注意，恰好有 2 个src 规范。第一个src 有一个url()，第二个src 有多个url() 声明，用逗号分隔，而不是分号。

【讨论】：

如果我们替换 ;正如您所指定的那样，在“ src”之后得到“无效的CSS：预期的“；”，是“：url（font-path ...”）错误。

我克隆了您的存储库并进行了此更改，它解决了问题。很确定它有效。 :) 你是在复制我的回答中的@font-face 代码吗？

感谢您的回答。被困了几个小时。

您能否添加 cmets 以说明为什么第二个和以后的 'src' 与第一个分开。为什么它们与第一个分开分组？谢谢。

我怀疑src 声明的这种特殊顺序是为了确保与各种浏览器的兼容性。我的答案基于 Bootstrap 源代码，可在此处找到：github.com/twbs/bootstrap/blob/v3.3.4/less/glyphicons.less#L11