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