Question

我是java web应用程序的新手，现在我正在努力创建一个。我使用tomcat 7，在用maven构建项目之后，我将它部署到tomcat中。我的页面（welcome.jsp）使用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>

问题相当奇怪：当我直接在谷歌浏览器中打开welcome.jsp（Ctrl+O）时，一切正常。 BUT 当我将它部署到tomcat并打开页面时，我看到奇怪的unicode字符而不是glyphicons。页面的其余部分（包括使用bootstrap的其他组件）显示完美，但bootstrap glyphicons和字体不起作用！任何帮助将不胜感激。

Answer 1

您还可以从外部服务器（又名 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>
...

_{您可能希望看到Why use a Content Delivery Network (CDN)?和3 reasons why you should let Google host jQuery for you。}

Answer 2

我遇到了同样的问题，经过一天的研究后，这对我有用。在比较Bootstrap插件的源文件和放在tomcat部署目录中的相同文件之后，我发现二进制字体文件的大小不同：

glyphicons-半身-regular.eot
glyphicons-半身-regular.ttf
glyphicons-半身-regular.woff

我发现maven war插件在资源复制期间破坏了二进制文件。如果您愿意，请在filtering section了解详情。

确保在maven war plugin conf部分中添加nonFilteredFileExtensions块，如下所示：

    <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>

它对我有用。

Answer 3

您需要确保在src / main / resources / fonts中有引导字体（glyphicons-halflings-regular。*）。

Answer 4

问题是“glyphicons”不仅仅是CSS，它们还需要比js和css更多的其他资源，这是“字体”这个资源来自bootstrap框架中的“js”和“css”文件夹，现在让所有这些工作收集只是复制Java EE项目中“css”和“js”相同级别的“fonts”文件夹。感谢。

Answer 5

尝试在jsp或html文件附近移动css，fonts和js文件夹。另外，不要忘记在适当的文件中编辑路径。 <link rel="stylesheet" href="css/bootstrap.min.css">

Answer 6

我建议你去bootstrap的网站，从那里获取最新稳定版CDN的URL，而不是@Paul在上面给出的答案。

使用CDN为我工作。

Bootstrap glyphicons在java webapp中不起作用

6 个答案: