2

I am completely new to java web applications and now I am trying to make one. I use tomcat 7 and after building the project with maven, I deploy it into tomcat. My page (welcome.jsp) uses bootstrap glyphicons:

...
<link rel="stylesheet" href="lib/bootstrap-3.3.1/css/bootstrap.min.css">
<script src="lib/jquery-2.1.3.min.js"></script>
<script src="lib/bootstrap-3.3.1/js/bootstrap.min.js"></script>
...
<body>
...
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="glyphicon glyphicon-chevron-right"></span>
...
</body>

And the problem is rather weird: when I open welcome.jsp in Google Chrome directly (Ctrl+O), then everything works fine. BUT when I deploy it into tomcat and open the page, I see strange unicode characters instead of glyphicons. The rest of the page (including other components using bootstrap) shows up perfectly, but bootstrap glyphicons and fonts do not work! Any help will be appreciated.

amphetamachine
  • 27,620
  • 12
  • 60
  • 72
haykart
  • 957
  • 5
  • 14
  • 34

6 Answers6

2

I had the same issue, and after a day spent on research here is what worked for me. After comparing source files from Bootstrap plugin, and the same files placed inside the tomcat deployment directory I saw that the binary font files are different in size:

  • glyphicons-halflings-regular.eot
  • glyphicons-halflings-regular.ttf
  • glyphicons-halflings-regular.woff

I found that maven war plugin is corrupting binary files during resource copy. Read more about it in filtering section if you want.

Make sure you add nonFilteredFileExtensions block inside maven war plugin conf section as follows:

    <build>
        <finalName>ROOT</finalName>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-war-plugin</artifactId>
                <version>${org.apache.maven.plugins.war.version}</version>
                <configuration>
                    <resourceEncoding>UTF-8</resourceEncoding>
                    <nonFilteredFileExtensions>
                        <nonFilteredFileExtension>eot</nonFilteredFileExtension>
                        <nonFilteredFileExtension>ttf</nonFilteredFileExtension>
                        <nonFilteredFileExtension>woff</nonFilteredFileExtension>
                    </nonFilteredFileExtensions>
                    <webResources>
                        <webResource>
                            <directory>src/main/webapp</directory>
                            <filtering>true</filtering>
                        </webResource>
                    </webResources>
                </configuration>
            </plugin>
        </plugins>
    </build>

It worked for me.

Amir Jamak
  • 351
  • 1
  • 2
  • 15
1

You can also import these libraries from external servers (aka Content Delivery Network,CDN ). e.g.:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Site</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    ...

</head>
...

You may want to see Why use a Content Delivery Network (CDN)? and 3 reasons why you should let Google host jQuery for you.

Paul Vargas
  • 41,222
  • 15
  • 102
  • 148
0

You need to make sure that you have bootstrap fonts (glyphicons-halflings-regular.*) in src/main/resources/fonts.

halafi
  • 1,064
  • 2
  • 16
  • 26
  • I just copied glyphicons-halflings-regular.* into src/main/resources/fonts, but it still doesn't work. – haykart Feb 07 '15 at 16:48
  • I would make sure they are deployed (recompile and redeploy to tomcat), other than that I cant see a reason why they should not work from what you posted. You might want to take a look [here](http://stackoverflow.com/questions/18369036/bootstrap-3-glyphicons-not-working) hopefully you will find some help. – halafi Feb 07 '15 at 17:24
  • Same issue for me. I have the glyphicons where @halafi suggests, but still not working. – Dani Sancas Apr 09 '15 at 14:55
0

The problem is that the "glyphicons" are not just CSS, they need other ressources more than js and css, which is the "fonts" this ressources comes whith "js" and "css" folders in the bootstrap framework, Now for making all this working to gather just copy the "fonts" folder in the same level of your "css" and "js" in your Java EE project. Thanks.

mkebri
  • 2,025
  • 1
  • 16
  • 14
0

Try to move the css, fonts and js folders near the jsp or html files. Also don't forget to edit the path in appropriate files. <link rel="stylesheet" href="css/bootstrap.min.css">

osix
  • 1
  • 1
0

Instead of @Paul's answer above, I would suggest you to go to bootstrap's site and get the URL for latest stable version of CDN from there.

Using CDN worked for me.

Sachin
  • 3,350
  • 2
  • 17
  • 29