Bootstrap glyphicons 在 java webapp 中不起作用答案

【问题标题】：Bootstrap glyphicons not working in java webappBootstrap glyphicons 在 java webapp 中不起作用
【发布时间】：2015-02-07 16:33:45
【问题描述】：

我对 java web 应用程序完全陌生，现在我正在尝试制作一个。我使用tomcat 7，在用maven构建项目后，我将它部署到tomcat中。我的页面 (welcome.jsp) 使用引导字形图标：

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

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

【问题讨论】：

标签： java javascript twitter-bootstrap tomcat web-applications

【解决方案1】：

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

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

我发现 maven war 插件在资源复制期间损坏了二进制文件。如果需要，请在filtering section 中阅读更多相关信息。

确保在 maven war 插件配置部分添加 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>

它对我有用。

【讨论】：

【解决方案2】：

您也可以从外部服务器（又名 Content Delivery Network,CDN）导入这些库。例如：

<%@ 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。}

【讨论】：

我也试过了。问题仍然存在：在本地工作，在 tomcat 上不起作用。
嗨，@haykart 看看我更新答案的前两行。在page 指令和meta 中使用UTF-8。希望有帮助
保罗，感谢您的评论。不幸的是，这也无济于事。

【解决方案3】：

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

【讨论】：

我刚刚将 glyphicons-halflings-regular.* 复制到 src/main/resources/fonts 中，但还是不行。
我会确保它们已部署（重新编译并重新部署到 tomcat），除此之外，我看不出它们不应该从您发布的内容中工作的原因。你可能想看看here希望你能找到一些帮助。
对我来说同样的问题。我有@halafi 建议的字形图标，但仍然无法正常工作。

【解决方案4】：

问题在于“glyphicons”不只是 CSS，它们需要的不仅仅是 js 和 css 的其他资源，也就是引导框架中的“js”和“css”文件夹中的“字体”，现在为了使所有这些工作收集起来，只需将“fonts”文件夹复制到 Java EE 项目中“css”和“js”的同一级别。谢谢。

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

我建议你去引导程序的网站，从那里获取最新稳定版 CDN 的 URL，而不是上面的 @Paul 答案。

使用 CDN 对我有用。

【讨论】：