Bootstrap 3.3.4 Glyphicons不工作？

Question

我最近一直在努力让Glyphicons工作，但没有运气。我正在使用具有以下文件结构的JSF框架。

我还通过从以下CSS代码中的每个路径中删除（..）来修改bootstrap.css中的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.woff2') format('woff2'), 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');
   }  

当不删除（..）时，JSF将显示以下2个警告：

Warning:   JSF1091: No mime type could be found for file css/lib/fonts/glyphicons-halflings-regular.woff2.  To resolve this, add a mime-type mapping to the applications web.xml.
Warning:   JSF1064: Unable to find or serve resource, css/lib/fonts/glyphicons-halflings-regular.woff2.  

但仍然总是向我展示一个奇怪的盒子而不是应该出现的Glyphicon？

请帮助..

Answer 1

通过使用以下表达式来正确引用资源，我找到了解决方案：

@font-face {

  font-family: 'Glyphicons Halflings';

  src: url("#{resource['default/1_0/fonts/glyphicons-halflings-regular.eot']}");
  src: url("#{resource['default/1_0/fonts/glyphicons-halflings-regular.eot']}") format('embedded-opentype'), url("#{resource['default/1_0/fonts/glyphicons-halflings-regular.woff2']}") format('woff2'), url("#{resource['default/1_0/fonts/glyphicons-halflings-regular.woff']}") format('woff'), url("#{resource['default/1_0/fonts/glyphicons-halflings-regular.ttf']}") format('truetype'), url("#{resource['default/1_0/fonts/glyphicons-halflings-regular.svg']}") format('svg');

     }

Answer 2

问题出在fonts文件夹中。

将您的字体文件夹替换为https://github.com/twbs/bootstrap处的字体文件夹，它可以正常工作。