CODEWITHSUNDEEP
csstwitter-bootstrap
John Hartley
John Hartley

Reputation: 483

Glyphicons < and > appearing as E079 and E080 in little squares in the Bootstrap 3 Carousel

I have used the design found at http://getbootstrap.com/examples/carousel/ I have downloaded the versions of CSS and JS used on the page:

CSS
http://getbootstrap.com/dist/css/bootstrap.min.css
http://getbootstrap.com/examples/carousel/carousel.css

Javascript:
https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js
http://getbootstrap.com/dist/js/bootstrap.min.js
http://getbootstrap.com/assets/js/docs.min.js

The scrolling is working ok and my image changes are fine. I have put the files together on a windows machine.

Any ideas as to what I am doing wrong? 

<a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>

Upvotes: 0

Views: 15879

Answers (4)

zajgo
zajgo

Reputation: 31

I was resolving issue with downloading fonts written inside bootstrap.min.css line 2464 @font-face { font-family: 'Glyphicons Halflings'; src: url(../fonts/glyphicons-halflings-regular.eot);...

Upvotes: 3

Rohan
Rohan

Reputation: 1

I too had same problem try this one:

make sure this file "your_template\less\variables.less" contains the right path.

Change path at:

"@icon-font-path: '../../plugins/system/t3/base-bs3/bootstrap/fonts/'";

Upvotes: -1

Gaurav
Gaurav

Reputation: 76

I had the same problem when I used the carousel gallery and bootstrap. Turns out I had not included the Glyphicons Halflings fonts in my site root folder. After I created a fonts folder and copied the required font files. The square box with E079 as replaced by the left < arrow.

Upvotes: 4

Sean Quinn
Sean Quinn

Reputation: 2171

If you are seeing squares that reflect the Unicode address of the glyph, e.g. E079, you may not have properly attributed the bootstrap classes on the <span> for the icon. You need to make sure that your span contains both the reference to the glyphicon web font (e.g. glyphicon) as well as the icon you're intending to use (e.g. glyphicon-chevron-left, and glyphicon-chevron-right).

For instance, from the example referenced above, the chevron's are identified as follows:

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  ...
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

If the classes are the same, as you indicate in your edit, inspect the elements with a browser tool like Firebug or Chrome (or Safari's) developer tools. Here you should be able to see what classes are currently applied to the elements and determine why the fonts are not rendering correctly. The first thing to look for is whether or not the class which defines the font family for the Glyphicon Halfings font is present on the same element as the chevron spans. E.g. you want to see the following class:

.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

along with...

.glyphicon-chevron-left:before {
  content: "\e079";
}

Reported for the <span class="glyphicon glyphicon-chevron-left"></span> node.

If you don't see both of those, the bootstrap CSS isn't being included or read properly.

Finally, if you're still having problems I would recommend starting a new .html document and paring down the example from Bootstrap's gallery as much as possible. That way there is less markup and less going on, and as you begin to disassemble it and put it back together you may find a missing quote, or some other typo which is causing the error that you're seeing.

Upvotes: 2

Related Questions