17

The two left and right chevron glyphicon are not showing, it works, but it shows a square box for some reason. When I click the positions where the glyhicons are I can scroll through pictures so all that is not right is the appearance of the glyphicons the left and right arrow usually expected are not showing?

<!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>
Improve this question
1
  • Sorry, I wasn't able to reproduce problem. I tried to reproduce the problem at Bootply: bootply.com/x9VUw3LOO6 with different images. I Googled some images with various sizes for testing, but the only time I had some square boxes in the carousel, was when the image wasn't found (I had the wrong URL address for the image). So if someone decides to have a look at the Bootply test, then please be aware those images were chosen by me (swiftly).
    – jyrkim
    Commented Dec 18, 2014 at 21:25

2 Answers 2

Reset to default
27

Similar to Jyrkim, your solution works for example editors like Bootply and JSFiddle. My only thought is that you're missing the fonts section of your bootstrap folder. White Squares is a placeholder for a character that can't be found in the current font type, like a special character in a custom font. It may render as [] instead of something like * or &. Make sure your folder structure in Bootstrap is set up as follows:

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

I would bet any money that the fonts folder is not there, or not linked properly. If your folder structure is the same as above, you can link the .css file like so:

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

Hope that helps!

Note

Using the CDN version of the style sheet will cause this to not be an issue, but may increase load time.

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

Bootstrap 4 doesn't support Glyphicons but if you want to use Glyphicons with bootstrap versions> 4 than based on this comment https://stackoverflow.com/a/65588852/17053552 Since I was using bootstrap 4.3.1v, I wasn't supposed to change the whole Bootstrap version or use any other icons or downloading extra files to just make icon work I tried something like this:

  1. In bootstrap-datetimepicker.min.js check for icons

    icons: {
           previous: 'glyphicon glyphicon-chevron-left',
           next: 'glyphicon glyphicon-chevron-right',
       }
  1. In bootstrap-datetimepicker.min.css, I changed the content From this:
     bootstrap-datetimepicker-widget table th.prev::after{content:"Previous Month"} 
   bootstrap-datetimepicker-widget table th.next::after{content:"Next Month"}

To this:

    bootstrap-datetimepicker-widget table th.prev::after{content:"previous"} 
    bootstrap-datetimepicker-widget table th.next::after{content:"next"}

and It worked for me.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.