引导程序中的轮播中没有出现左右箭头答案

【问题标题】：left and right arrows not appearning in carousel in bootstrap引导程序中的轮播中没有出现左右箭头
【发布时间】：2015-09-19 18:13:16
【问题描述】：

<div id="myCarousel" class=" pull-left carousel slide" style="width: 950px; padding-right: -100px; margin: 0 auto" data-ride="carousel">

    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>


    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="/images/lab4.jpg" alt="Chania" width="500" height="375">
         <div class="carousel-caption">
        <h3>Lab building</h3>
        <p> Entrance for great future</p>
      </div>
      </div>

      <div class="item">
        <img src="/images/lab5.jpg" alt="Chania" width="500" height="375">
        <div class="carousel-caption">
        <h3>Lotus</h3>
        <p> Beauty of nature</p>
      </div>
      </div>

      <div class="item">
        <img src="/images/lab6.jpg" alt="Flower" width="500" height="375">
        <div class="carousel-caption">
        <h3>Resource Centre</h3>
        <p> A Temple of Books</p>
      </div>
      </div>

    </div>


    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

我正在尝试使用引导程序实现轮播，但我看不到导航箭头，而是看到了这个字符“%o”。在控制台中我收到以下错误：：

GET http://localhost:3000/fonts/glyphicons-halflings-regular.woff2 (anonymous function) @ jquery.self-d03a5518f45df77341bdbe6201ba3bfa547ebba8ed64f0ea56bfa5f96ea7c074.js?body=1:3605jQuery.Callbacks.fire @ jquery.self-d03a5518f45df77341bdbe6201ba3bfa547ebba8ed64f0ea56bfa5f96ea7c074.js?body=1:3144jQuery.Callbacks.self.fireWith @ jquery.self-d03a5518f45df77341bdbe6201ba3bfa547ebba8ed64f0ea56bfa5f96ea7c074.js?body=1:3256jQuery.extend.ready @ jquery.self-d03a5518f45df77341bdbe6201ba3bfa547ebba8ed64f0ea56bfa5f96ea7c074.js?body=1:3468completed @ jquery.self-d03a5518f45df77341bdbe6201ba3bfa547ebba8ed64f0ea56bfa5f96ea7c074.js?body=1:3499
home:1 GET http://localhost:3000/fonts/glyphicons-halflings-regular.woff 
home:1 GET http://localhost:3000/fonts/glyphicons-halflings-regular.ttf 404 (Not Found)

我搜索了错误，在github中发现一条评论为：：

Make sure you're including the Glyphicon font files - carousel arrows are using Glyphicon chevrons by default.

我如何包含 Glyphicon 字体文件？提前致谢我在@font-face:::

更改了我的 bootstrap.css

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

到

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('/assets/glyphicons-halflings-regular.eot');
  src: url('/assets/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('/assets/glyphicons-halflings-regular.woff') format('woff'), url('/assets/glyphicons-halflings-regular.ttf') format('truetype'), url('/assets/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

但我仍然得到同样的错误

【问题讨论】：

标签： twitter-bootstrap carousel

【解决方案1】：

您缺少 glyphicons 字体的 ttf 文件 glyphicons-halflings-regular.ttf，您可以在引导分发 zip 文件中找到它，只需将缺少的文件添加到 fonts/ 即可。

另外，请确认您已在页面的 <head> 中正确包含引导 css：

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

【讨论】：

感谢 @uraimo 我已将 bootstrap.min.css 文件链接到我的 rails 应用程序，并且我已将字体文件夹（来自引导分发 zip 文件）放在 /app/assets 文件夹中，但我仍然无法看箭头
哦，好的，正要回复添加一个“../”：D

【解决方案2】：

我试图将我的 bootstrap.css @font-face 部分更改为

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../assets/glyphicons-halflings-regular.eot');
  src: url('../assets/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
  url('../assets/glyphicons-halflings-regular.woff') format('woff'),
  url('../assets/glyphicons-halflings-regular.ttf') format('truetype'),
  url('../assets/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

成功了

【讨论】：