Question

我使用最新版本的bootstrap工作旋转木马的Glyphicons不在Firefox中。在Firefox图标中显示内容如：/ e080。

这是我的代码： -

<div id="myCarousel" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      </ol>
      <div class="carousel-inner">
        <div class="item active">
            <div class="embed-responsive embed-responsive-16by9" style="height:650px;">
                <video autoplay loop class="embed-responsive-item">
                    <source src="../video/ops.mp4" type=video/mp4 >
                </video>
            </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>

Answer 1

这可能是因为您没有在页面上下载或安装glyphicons字体。如果您使用MaxCDN库，它将已包含在内。以下是您需要添加到页面上的内容：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

你可能会有这样一个旧的bootstrap CSS链接：

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

您需要做的就是删除它。如果您的服务器速度很快或者您不想使用MaxCDN，则可以下载glyphicons字体。打开你的控制台，会出现一两个404错误。找到浏览器正在查找的文件，并将需求文件下载到它的位置。这是下载链接：

TTF：https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/fonts/glyphicons-halflings-regular.ttf`

WOLF2：https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/fonts/glyphicons-halflings-regular.wolf2

WOLF：https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/fonts/glyphicons-halflings-regular.wolf

EOT：https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/fonts/glyphicons-halflings-regular.eot

但无论如何，我建议第一个选择，因为它对我来说更快，并且工作得更好。

Answer 2

以下示例显示了如何创建基本轮播

   <div id="myCarousel" class="carousel slide">
     <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
   </ol>   
  <div class="carousel-inner">
  <div class="item active">
      <img src="/bootstrap/images/slide1.png" alt="First slide">
   </div>
 </div>
  <a class="carousel-control right" href="#myCarousel" 
     data-slide="next">&rsaquo;</a>

Bootstrap 3 Glyphicons仅在Firefox中不起作用

2 个答案: