使用bootstrap 3 glypicons与webjars和jsf2.2

Question

我正在尝试在jsf 2.2中创建一个带bootstrap和glypicons的简单页面.我已经包含了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类的方式:

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

Answer 1

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

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

--- UPDATE
这是因为JSF中的ResourceHandler将库值(webjars)作为参数添加到URI的末尾:faces/javax.faces.resource/bootstrap/3.1.1/css/bootstrap.min.css？ln = webjars

在bootstrap.min.css CSS中有这样的文件引用:url('../ fonts/glyphicons-halflings-regular.woff')format('woff'),url('../ fonts/glyphicons-halflings- regular.ttf')格式('truetype'),

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

在我看来,最好使用标准的html标签,<link>而不是<h:outputStylesheet>因为JSF组件树会更小并且它会影响性能.里面bootstrap.min.css没有EL,所以没有必要使用<h:outputStylesheet>