在Webjars和jsf2.2中使用bootstrap 3 glypicons [英] Using bootstrap 3 glypicons with webjars and jsf2.2

问题描述

我正在尝试在jsf 2.2中制作一个包含引导程序和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>

解决方案

您应使用<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的末尾: face/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')format('truetype')，

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

在我看来，

最好使用标准的html标签<link>代替<h:outputStylesheet>，因为JSF组件树会更小并且会影响性​​能.在bootstrap.min.css内部没有EL，因此无需使用<h:outputStylesheet>

I'm trying to make a simple page with bootstrap and glypicons in jsf 2.2. I've included webjar's bootstrap dependency (and opening the jar I can see the fonts file are present).

When deploying the app to wildfly, bootstrap css works correctly, but icons shown are horrible (like a default font or something). Looking at the network tab in the browser, I only see 404 errors:

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

I tried including the other dependency (bootstrap-glypicons) and I only get the 404 errors twice. What am I missing?

This is how I'm including boostrap, which works correctly for css:

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

And this is how I'm using the css classes:

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

解决方案

You should use <link> tag instead of <h:outputStylesheet> eg.

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

--- UPDATE
This happen because ResourceHandler in JSF add library value (webjars) to the end of URI as a parameter: faces/javax.faces.resource/bootstrap/3.1.1/css/bootstrap.min.css?ln=webjars

in bootstrap.min.css CSS there are such references to files: url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),

so if you want to use <h:outputStylesheet> you can write own ResourceHander or you can edit bootstrap.min.css and fix paths to glyphicons-halflings-regular.* files

In my opinion is better to use standard html tag <link> instead of <h:outputStylesheet> because JSF component tree will be smaller and it act on performance. Inside bootstrap.min.css there is no EL so there is no need to use <h:outputStylesheet>

这篇关于在Webjars和jsf2.2中使用bootstrap 3 glypicons的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！