Bootstrap 3：图标未显示

Posted 2023-03-06

【中文标题】Bootstrap 3：图标未显示

【英文标题】：Bootstrap 3: Icons are not showing

【发布时间】：2014-11-30 17:04:39

【问题描述】：

我正在为我的 rails 应用程序使用 bootstrap 3。在视图页面中，引导图标未显示。

我的文件夹结构看起来像。

 app/assets/stylesheets/bootstrap.min.css

 app/assets/fonts/  ###font files

 app/assets/images/  ###image files

在 bootstrap.min.css 中我调用 font-family 如下

 @font-facefont-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')

如果我做错了，请纠正我。

更新：

显示图标的代码：

 <a title="edit" href="<%= edit_customer_customer_path(cust, from: "admin")%>">
 <i class="icon-pencil bigger-130"></i>
 </a>

【问题讨论】：

确保您的glyphicons-halflings-regular.eot 和app/assets/fonts/ 目录中有其他文件。

【参考方案1】：

Bootstrap 3 使用不同的图标类，您使用的是 Bootstrap 2 的 icon-* 类。在 Bootstrap 3 中，您应该使用 .glyphicon 和 .glyphicon-* CSS 类：

<span class="glyphicon glyphicon-pencil"></span>

见Migrating to v3.x。

【参考方案2】：

根据您导入字体的方式和项目结构，结构没有任何问题。当您尝试打印图标时，很可能存在问题。您可以发布一个显示您如何打印图标的 sn-p 吗？

更新： 根据您对代码示例的更新，您似乎正在使用 Bootstrap 2 图标类，而在 3 中有一个字体系列而不是 png 精灵，因此您应该以这种方式显示图标：

<i class="glyphicon glyphicon-pencil"></i>