2

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)
leppie
  • 115,091
  • 17
  • 196
  • 297
Kamal
  • 1,476
  • 1
  • 13
  • 21
  • Can you please add what errors you see in the browser console? Let's confirm that glyph fails with 404. If so, please look if has been generated though but at the wrong location. Add additional information by editing your post. – try-catch-finally Mar 15 '15 at 06:39
  • Thanks I added the folder fonts in my web app and it works. i though wro4j would take care of that. – Kamal Mar 15 '15 at 07:02
  • Kamal, Yyou can (should) answer you own question of how to solve this issue. – try-catch-finally Mar 15 '15 at 07:08
  • Thank for responding to my question and pointing out. – Kamal Mar 15 '15 at 07:13

2 Answers2

1

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.

Alex Objelean
  • 3,893
  • 2
  • 27
  • 36
  • 1
    Alex can you tell me, how to replace webjar uri with classpath uri? I am very new to wro4j so i didn't get it. – Priyank Thakkar Aug 11 '15 at 07:55
  • @Priyank Thakkar **classpath uri**:`file:${project.basedir}/src/main/resources/static/js/ng-ui-router/angular-ui-router.min.js.` **webjar uri:** `webjar:angularjs/1.4.4/angular-route.min.js` – Kamal Dec 26 '15 at 05:58
  • How does this solve the issue? I'm not using cssUrlRewritingProcessor and still have the same issue. I included a main.less in src/main/wro and referenced it from wro.xml. If I override the path to /font in a main.less it doesn't work still. Any input appreciated. Thanks – H.Rabiee May 25 '16 at 12:51
0

Moving the font folder in my web app directory solved the issue. just copy the files under the fonts folder and past it in your web app css directory.

Kamal
  • 1,476
  • 1
  • 13
  • 21