bootstrap 中的轮播中没有出现左右箭头

Question

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

我正在尝试使用 bootstrap 实现轮播，但我看不到导航箭头，而是看到了这个字符“%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中找到了评论as::

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');
}

但我仍然得到同样的错误

Answer 1

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

此外，确认您已在页面的 <head> 中正确包含 bootstrap css:

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

Answer 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');
}

成功了

bootstrap 中的轮播中没有出现左右箭头

left and right arrows not appearning in carousel in bootstrap

carousel

twitter-bootstrap