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实现轮播，但我无法看到导航箭头，而是看到这个角色＆＃34;％o＆＃34;。在控制台中我收到以下错误::

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

但我仍然得到同样的错误

Answer 1

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

另外，请确认您已在网页的<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的转盘中进行学习

2 个答案: