Bootstrap glyphicons не работает в java webapp

Я совершенно не знаком с веб-приложениями Java, и теперь я пытаюсь их создать. Я использую tomcat 7 и после создания проекта с maven, я развертываю его в tomcat. Моя страница (welcome.jsp) использует бутстраповских glyphicons:Bootstrap glyphicons не работает в java webapp

... 
<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 в Google Chrome напрямую (Ctrl+O), то все работает отлично. BUT, когда я разворачиваю его в tomcat и открываю страницу, я вижу странные символы Unicode вместо глификонов. Остальная часть страницы (включая другие компоненты с использованием бутстрапа) отображается отлично, но бутстрапные глификоны и шрифты не работают! Любая помощь будет оценена по достоинству.

источник

2015-02-07 haykart

Вы должны убедиться, что у вас есть шрифты начальной загрузки (глификоны-халфлинги-регулярные. *) В src/main/resources/fonts.

источник

2015-02-07 16:39:42 halafi

Я просто скопировал глификоны-халфлинги-регулярно. * В src/main/resources/fonts, но он все равно не работает. – haykart

Я бы удостоверился, что они развернуты (перекомпилируйте и передислоцируйте на tomcat), кроме этого я не вижу причины, по которым они не должны работать из того, что вы опубликовали. Возможно, вы захотите посмотреть [здесь] (http://stackoverflow.com/questions/18369036/bootstrap-3-glyphicons-not-working), надеюсь, вы найдете некоторую помощь. – halafi

Тот же вопрос для меня. У меня есть глификоны, которые предлагает @halafi, но все еще не работает. –

Вы также можете импортировать эти библиотеки с внешних серверов (aka Сеть доставки контента, 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.}

источник

2015-02-07 16:56:33

Я тоже это пробовал. Проблема остается: работает локально, не работает на tomcat. – haykart

Привет, @haykart Посмотрите на две первые строки моего обновленного ответа. Используйте 'UTF-8' в директиве' page' и в 'meta'. Надеюсь, что поможет –

Пол, спасибо за ваш комментарий. К сожалению, это тоже не помогло. – haykart

Проблема заключается в том, что «глификоны» - это не просто CSS, им нужны другие ресурсы более, чем js и css, что означает «шрифты», которые используют эти ressources с папками «js» и «css» в рамках начальной загрузки , Теперь для того, чтобы все это работало, чтобы скопировать только папку «fonts» на том же уровне ваших «css» и «js» в вашем проекте Java EE. Спасибо.

источник

2015-04-24 13:10:11 mkebri

Попробуйте переместить css, fonts и js папки рядом с jsp или html-файлами. Также не забудьте отредактировать путь в соответствующих файлах. <link rel="stylesheet" href="css/bootstrap.min.css">

источник

2015-05-13 12:25:49 osix

У меня была одна и та же проблема, и после того, как день, проведенный на исследованиях, это то, что сработало для меня. После сравнения исходных файлов из Bootstrap плагина и тех же файлов, размещенных внутри каталога развертывания кот я увидел, что бинарные файлы шрифтов различаются по размеру:

glyphicons-Халфлинги-regular.eot
glyphicons-Халфлинги -regular.ttf
glyphicons-полурослики-regular.woff

Я обнаружил, что Maven войны плагин развращают двоичные файлы во время копирования ресурсов. Узнайте больше об этом в filtering section, если хотите.

Убедитесь, что вы добавить nonFilteredFileExtensions блок внутри Maven войны плагин конф раздел следующим образом:

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

Он работал для меня.

источник

2015-06-17 14:27:11

Вместо того, чтобы ответить на @ Paul выше, я предлагаю вам перейти на сайт начальной загрузки и получить URL-адрес для последней стабильной версии CDN.

Использование CDN сработало для меня.

источник

2015-07-02 11:03:52 Sachin

Bootstrap glyphicons не работает в java webapp

ответ

Смежные вопросы