twitter-bootstrap Glyphicons < 和 > 在 Bootstrap 3 Carousel 的小方块中显示为 E079 和 E080

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

提问by John Hartley

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:

我使用了在http://getbootstrap.com/examples/carousel/ 上找到的设计 我已经下载了页面上使用的 CSS 和 JS 版本：

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

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

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.

滚动工作正常，我的图像变化很好。我已将文件放在 Windows 机器上。

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>

回答by Gaurav

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.

当我使用轮播库和引导程序时，我遇到了同样的问题。原来我没有在我的站点根文件夹中包含 Glyphicons Halflings 字体。在我创建了一个字体文件夹并复制了所需的字体文件之后。带有 E079 的方框被左 < 箭头替换。

回答by Sean Quinn

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).

如果您看到反映字形的 Unicode 地址的方块，例如E079，您可能没有正确地将引导类归因于<span>图标上。您需要确保您的跨度包含对 glyphicon Web 字体（例如glyphicon）的引用以及您打算使用的图标（例如glyphicon-chevron-left、 和glyphicon-chevron-right）。

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

例如，从上面引用的示例中，V 形标识如下：

<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 Halfingsfont is present on the same element as the chevron spans. E.g. you want to see the following class:

如果类相同，如您在编辑中指出的那样，请使用浏览器工具（如 Firebug 或 Chrome（或 Safari 的）开发人员工具）检查元素。在这里，您应该能够看到当前应用于元素的类并确定字体无法正确呈现的原因。首先要寻找的是定义Glyphicon Halfings字体的字体系列的类是否存在于与 V 形跨度相同的元素上。例如，您想查看以下类：

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

为<span class="glyphicon glyphicon-chevron-left"></span>节点报告。

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

如果您没有看到这两个，则引导 CSS 没有被包含或正确读取。

Finally, if you're still having problems I would recommend starting a new .htmldocument 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.

最后，如果您仍然遇到问题，我建议您创建一个新.html文档并尽可能减少 Bootstrap 库中的示例。这样，标记更少，操作更少，当您开始拆卸它并将其重新组合在一起时，您可能会发现丢失的引用或其他一些导致您看到的错误的错字。

回答by zajgo

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);...

我正在解决下载在 bootstrap.min.css line 2464 中编写的字体的问题 @font-face { font-family: 'Glyphicons Halflings'; src: url(../fonts/glyphicons-halflings-regular.eot);...

回答by Rohan

I too had same problem try this one:

我也有同样的问题试试这个：

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

确保此文件"your_template\less\variables.less"包含正确的路径。

Change path at:

更改路径：

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