Bootstrap 3.3.4 Glyphicons不工作？

Question

我最近一直在尝试让Glyphicons工作，但没有成功。我使用的JSF框架的文件结构如下。

​

​

我还修改了bootstrap.css中的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将显示以下两个警告：

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文件夹。

将你的fonts文件夹替换为：https://github.com/twbs/bootstrap中的文件夹，它会工作得很好。