CODEWITHSUNDEEP
twitter-bootstrap
user2668069
user2668069

Reputation: 249

bootstrap left and right glyphicons not showing in carousel?

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>

Upvotes: 17

Views: 38422

Answers (2)

Ramz
Ramz

Reputation: 43

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.

Upvotes: 0

Tim Lewis
Tim Lewis

Reputation: 29288

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

Upvotes: 27

Related Questions