bootstrap de gauche et de droite glyphicons pas en carrousel?

Les deux à gauche et à droite de chevron glyphicon ne sont pas visibles, il fonctionne, mais il affiche une boîte carrée pour une raison quelconque. Lorsque je clique sur les positions où les glyhicons sont je peut faire défiler les images, pour tout ce qui n'est pas droit, c'est l'aspect de la glyphicons la gauche et flèche droite habituellement ne sont pas visibles?

<!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>
Désolé, je n'ai pas pu reproduire le problème. J'ai essayé de reproduire le problème à Bootply: bootply.com/x9VUw3LOO6 avec des images différentes. J'ai Googlé quelques images avec différentes tailles pour les tests, mais la seule fois où j'ai eu quelques carrés dans le carrousel, c'est quand l'image n'a pas été trouvé (j'ai eu la mauvaise adresse URL de l'image). Donc, si quelqu'un décide d'avoir un coup d'oeil à la Bootply test, alors s'il vous plaît être conscient que ces images ont été choisis par moi (rapidement).

OriginalL'auteur user2668069 | 2014-12-18

  1. 22

    Similaire à Jyrkim, votre solution fonctionne pour exemple les éditeurs comme Bootply et JSFiddle. Ma seule pensée est que vous êtes absent de la section des polices de votre dossier bootstrap. White Squares est un espace réservé pour un personnage qui ne peut pas être trouvé dans la police en cours, comme un caractère spécial dans une police personnalisée. Il peut rendre comme [] au lieu de quelque chose comme * ou &. Assurez-vous que votre structure de dossier dans le Bootstrap est défini comme suit:

    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

    Je serais prêt à parier de l'argent que l' fonts dossier n'est pas là, ou n'est pas lié correctement. Si votre structure de dossier est le même que ci-dessus, vous pouvez lier le .fichier css comme ceci:

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

    Espère que ça aide!

    Note

    À l'aide de la CAN version de la feuille de style sera à l'origine de ce pas être un problème, mais peut augmenter le temps de chargement.

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    Tu es la bienvenue, content d'avoir pu aider!

    OriginalL'auteur Tim Lewis