бутстрап левый и правый глификоны не отображаются в карусели?

Два левого и правого шевронного глификона не показывают, он работает, но по какой-то причине он показывает квадратную коробку. Когда я нажимаю на позиции, где глигиконы, я могу прокручивать изображения, поэтому все, что не так, - это появление глифов, которые обычно не отображаются слева и справа.бутстрап левый и правый глификоны не отображаются в карусели?

<!DOCTYPE html> 
<html> 
<head> 
    <title>Student Association</title> 
    <link rel="stylesheet" href="css/bootstrap.min.css"> 
</head> 
<body> 
    <div class="carousel slide" data-ride="carousel" id="carousel-ex"> 
     <ol class="carousel-indicators"> 
      <li class="active" data-slide-to="0" data-target="#carousel-ex"></li> 
      <li data-slide-to="1" data-target="#carousel-ex"></li> 
      <li data-slide-to="2" data-target="#carousel-ex"></li> 
      <li data-slide-to="3" data-target="#carousel-ex"></li> 
      <li data-slide-to="4" data-target="#carousel-ex"></li> 
      <li data-slide-to="5" data-target="#carousel-ex"></li> 
     </ol> 
     <div class="carousel-inner"> 
      <div class="item active"><img alt="abuja" class="img-responsive" id= 
"afCountries" src="img/african-countries/abuja-nigeria.jpg"> 
       <div class="carousel-caption"> 
        <h3>Abuja, Nigeria</h3> 
       </div> 
      </div> 
      <div class="item"><img alt="accra" class="img-responsive" id="afCountries" src= 
"img/african-countries/accra-ghana.jpg"> 
       <div class="carousel-caption"> 
        <h3>Accra, Ghana</h3> 
       </div> 
      </div> 
      <div class="item"><img alt="kigali" class="img-responsive" id="afCountries" 
src="img/african-countries/kigali-rwanda.jpg"> 
       <div class="carousel-caption"> 
        <h3>Kigali, Rwanda</h3> 
       </div> 
      </div> 
      <div class="item"><img alt="durban" class="img-responsive" id="afCountries" 
src="img/african-countries/durban-southafrica.jpg"> 
       <div class="carousel-caption"> 
        <h3>Durban, South Africa</h3> 
       </div> 
      </div> 
      <div class="item"><img alt="Johannesburg" class="img-responsive" id= 
"afCountries" src="img/african-countries/Johannesburg-South_Africa.jpg"> 
       <div class="carousel-caption"> 
        <h3>Johannesburg, South Africa</h3> 
       </div> 
      </div> 
      <div class="item"><img alt="kenya" class="img-responsive" id="afCountries" src= 
"img/african-countries/kenya.jpg"> 
       <div class="carousel-caption"> 
        <h3>Kenya</h3> 
       </div> 
      </div> 
     </div> 
     <a class="left carousel-control" data-slide="prev" href= 
"#carousel-ex"><span class="glyphicon glyphicon-chevron-left"></span></a> 
     <a class="right carousel-control" data-slide="next" href= 
"#carousel-ex"><span class= 
"glyphicon glyphicon-chevron-right"></span></a> 
    </div> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">  </script> 
    <!-- Latest compiled and minified JavaScript --> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js">   </script> 
</body> 
</html>

источник

2014-12-18 user2668069

К сожалению, я не смог воспроизвести проблему. Я попытался воспроизвести проблему в Bootply: http://www.bootply.com/x9VUw3LOO6 с разными изображениями. Я искал некоторые изображения с различными размерами для тестирования, но единственный раз, когда у меня были квадратные квадратики в карусели, было то, что изображение не было найдено (у меня был неправильный URL-адрес для изображения). Поэтому, если кто-то решит взглянуть на тест Bootply, тогда, пожалуйста, помните, что эти изображения были выбраны мной (быстро). – jyrkim

Как и в случае с Jyrkim, ваше решение работает, например, такими редакторами, как Bootply и JSFiddle. Моя единственная мысль состоит в том, что вам не хватает раздела шрифтов в вашей папке bootstrap. White Squares - это заполнитель для символа, который не может быть найден в текущем типе шрифта, как специальный символ в пользовательском шрифте. Он может отображаться как [] вместо чего-то вроде * или &. Убедитесь, что структура папок в Bootstrap устанавливается следующим образом:

bootstrap 
-> css 
    -> bootstrap-theme.css 
    -> bootstrap-theme.css.map 
    -> bootstrap-theme.min.css 
    -> bootstrap.css 
    -> bootstrap.min.css 
    -> theme.css 
-> fonts 
    -> glyphicons-halflings-regular.eot 
    -> glyphicons-halflings-regular.svg 
    -> glyphicons-halflings-regular.ttf 
    -> glyphicons-halflings-regular.woff 
-> js 
    -> bootstrap.js 
    -> bootstrap.min.js

я поставил бы деньги, что папка fonts не существует, или не связаны должным образом. Если структура вашей папки такая же, как указано выше, вы можете связать файл .css следующим образом:

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

Надеюсь, что это поможет!

Примечание

Используя версию CDN таблицы стилей заставит это не является проблемой, но может увеличить время загрузки.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

источник

2014-12-18 21:51:41

Добро пожаловать, рад, что смогу помочь! –

бутстрап левый и правый глификоны не отображаются в карусели?

ответ

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