Question

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

我的文件夹结构如下。

 app/assets/stylesheets/bootstrap.min.css

 app/assets/fonts/  ###font files

 app/assets/images/  ###image files

并且在bootstrap.min.css中我正在调用font-family，如下所示

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

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

更新：

显示图标的代码：

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

Answer 1

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

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

请参阅Migrating to v3.x。

Answer 2

根据导入字体和项目结构的方式，结构没有任何问题。当您尝试打印图标时，很可能会出现问题。你可以发一个片段来展示你如何打印图标吗？

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

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

Bootstrap 3：图标未显示

2 个答案: