twitter-bootstrap - Bootstrap 3 Glyphicons 仅在 Firefox 中不起作用

Question

我正在 bootstrap 中工作，最新版本的轮播 Glyphicons 不在 Firefox 中。在 Firefox 中图标显示为内容，如 content:/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

这可能是因为您尚未在页面上下载或安装字形字体。如果您使用 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 `

狼2:https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/fonts/glyphicons-halflings-regular.wolf2

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

但无论如何，我建议第一个选项，因为它对我来说更快并且效果更好。