Twitter bootstrap 3 在webjars和jsf2.2中使用bootstrap 3 glypicons

我试图在JSF2.2中使用引导和glypicons创建一个简单的页面。我已经包含了webjar的引导依赖项（打开jar我可以看到字体文件的存在）

将应用程序部署到wildfly时，引导css工作正常，但显示的图标很糟糕（比如默认字体或其他）。查看浏览器中的“网络”选项卡，我只看到404个错误：

http://localhost:8080/proto/javax.faces.resource/bootstrap/3.1.1/fonts/glyphicons-halflings-regular.woff 404

http://localhost:8080/proto/javax.faces.resource/bootstrap/3.1.1/fonts/glyphicons-halflings-regular.ttf 404

我尝试包含其他依赖项（引导glypicons），但只得到两次404错误。我错过了什么

这就是我如何包括boostrap，它可以正确地用于css：

<h:outputStylesheet library="webjars" name="bootstrap/3.1.1/css/bootstrap.min.css" />

这就是我使用css类的方式：

<button><span class="glyphicon glyphicon-minus"></span></button>

您应该使用

标记而不是

例如

---更新
这是因为JSF中的ResourceHandler将库值（webjars）作为参数添加到URI的末尾： faces/javax.faces.resource/bootstrap/3.1.1/css/bootstrap.min.css？ln=webjars

在bootstrap.min.css中，有这样的文件引用： url（'../fonts/glyphicons-halflings-regular.woff'）格式（'woff'），url（'../fonts/glyphicons-halflings-regular.ttf'）格式（'truetype'）

因此，如果您想使用

，您可以编写自己的ResourceHander，也可以编辑

bootstrap.min.css

并修复

glyph图标的路径。*

文件

---

在我看来，最好使用标准的html标记

而不是

，因为JSF组件树会更小，并且会影响性能。内部

bootstrap.min.css

没有EL，因此无需使用

小更新：webjars有多个css库的JSF特定版本，在使用bootstrap css的情况下，以下功能可以正常工作：

<h:outputStylesheet library="webjars" name="bootstrap/3.3.5/css/bootstrap-jsf.css" />

---

请注意

-jsf

后缀。

您是否愿意详细说明为什么这样做？jsf包含css和javascript的方法是使用outputStylesheet和outputScript标记。将其更改为标准html5标记解决了这里的问题，同时也解决了AngularJS不加载.map文件的问题。这是jsf的限制吗？请看我的答案更新。我希望它能解释得足够清楚

<h:outputStylesheet library="webjars" name="bootstrap/3.3.5/css/bootstrap-jsf.css" />