使用Webjars和JSF2.2与Bootstrap 3 Glyphicons的集成

Question

我正在尝试使用Bootstrap和JSF 2.2中的Glyphicon创建一个简单的页面。我已经包含了WebJar的Bootstrap依赖项（打开JAR文件，我可以看到字体文件存在）。

将应用程序部署到Wildfly时，Bootstrap 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

我尝试包含另一个依赖项（bootstrap-glypicons），但只出现了两次404错误。我错过了什么？

这是我如何包含boostrap的方式，它可以正确地使用css：

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

这是我使用CSS类的示例代码：

这是我如何使用CSS类：

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

- adrianmoya

Answer 1

您应该使用<link>标签而不是<h:outputStylesheet>标签。

<link rel="stylesheet" type="text/css" media="all" href="webjars/bootstrap/3.1.1/css/bootstrap.min.css"/>

--- 更新
出现这种情况是因为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') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype')

因此，如果您想使用<h:outputStylesheet>，您可以编写自己的ResourceHander或编辑bootstrap.min.css并修复路径到glyphicons-halflings-regular.*文件。

在我看来，最好使用标准HTML标签<link>而不是<h:outputStylesheet>，因为JSF组件树会更小，性能会更好。在bootstrap.min.css中没有EL，因此不需要使用<h:outputStylesheet>

- Krzysztof Miksa

---

你能详细解释一下为什么这个方法有效吗？jsf包含CSS和JavaScript的方式是使用outputStylesheet和outputScript标签。将其更改为标准的HTML5标签解决了此处的问题，并且还解决了AngularJS无法加载.map文件的问题。这是jsf的限制吗？ - adrianmoya

请查看我的答案更新。希望它已经解释得足够清楚了。 - Krzysztof Miksa

Answer 2

小更新：WebJars有几个针对JSF的CSS库，就像在使用Bootstrap CSS时一样：

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

请注意使用 -jsf 后缀。

- Ampyc