twitter-bootstrapwro4j

Wro4j not showing BootStrap Glyphicons search button component


Currently I'm evaluating a web resource optimizer for my Java web app. I start using Wro4j and I'm having small issue it could be a configuration related.

The issue I'm having is only related to bootstrap glyphicons component not rendered properly, the code i have in my html is:

<p>Search icon on a styled link button:
  <a href="#" class="btn btn-info btn-lg">
    <span class="glyphicon glyphicon-search"></span> Search
  </a>
</p>

My wro.xml configuration

<groups xmlns="http://www.isdc.ro/wro">
    <group name="group1">
        <css>webjar:bootstrap/3.3.2/less/bootstrap.less</css>
        <css>file:${project.basedir}/src/main/wro/main.less</css>
        <css>webjar:bootstrap-select/1.6.3/dist/css/bootstrap-select.css</css>      
        <js>webjar:jquery/2.1.1/jquery.min.js</js>
        <js>webjar:bootstrap-select/1.6.3/js/bootstrap-select.js</js>
        <js>webjar:bootstrap/3.3.2/js/bootstrap.min.js</js>
        <js>webjar:angularjs/1.3.8/angular.min.js</js>
        <js>webjar:angularjs/1.3.8/angular-route.min.js</js>
        <js>webjar:angularjs/1.3.8/angular-cookies.min.js</js>
    </group>
</groups>

This is the error i get in the browser console

Screenshot of the button with the broken glyph

I see these errors in the browser's console:

GET localhost:8080/fonts/glyphicons-halflings-regular.woff2 localhost/:1
GET localhost:8080/fonts/glyphicons-halflings-regular.woff localhost/:1
GET localhost:8080/fonts/glyphicons-halflings-regular.ttf 404 (Not Found)

Solution

  • The fonts resource is referred relatively in bootstrap less file. There is a known bug which prevents the wro4j (when using cssUrlRewritingProcessor) to rewrite properly relative url's when using webjars. The possible workaround, is to replace the webjar uri with a classpath uri.