Bootstrap glyphicons not working in java webapp
Question
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.
6 answers
solution1
2 2015-06-17 14:27:11
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.
solution2
1 2015-02-07 16:56:33
You can also import these libraries from external servers (aka Content Delivery Network ,CDN ). eg:
<%@ 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 .
solution3
0 2015-02-07 16:39:42
您需要确保在src / main / resources / fonts中具有引导程序字体（glyphicons-halflings-regular。*）。
solution4
0 2015-04-24 13:10:11
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.
solution5
0 2015-05-13 12:25:49
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">
solution6
0 2015-07-02 11:03:52
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.