引导左右字形图标没有显示在轮播中？答案

【问题标题】：bootstrap left and right glyphicons not showing in carousel?引导左右字形图标没有显示在轮播中？
【发布时间】：2014-12-18 20:27:44
【问题描述】：

左右两个人字形字形没有显示，它可以工作，但由于某种原因它显示了一个方形框。当我单击字形图标所在的位置时，我可以滚动浏览图片，所以所有不正确的是通常预期的左右箭头没有显示的字形图标的外观？

<!DOCTYPE html>
<html>
<head>
    <title>Student Association</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
    <div class="carousel slide" data-ride="carousel" id="carousel-ex">
        <ol class="carousel-indicators">
            <li class="active" data-slide-to="0" data-target="#carousel-ex"></li>
            <li data-slide-to="1" data-target="#carousel-ex"></li>
            <li data-slide-to="2" data-target="#carousel-ex"></li>
            <li data-slide-to="3" data-target="#carousel-ex"></li>
            <li data-slide-to="4" data-target="#carousel-ex"></li>
            <li data-slide-to="5" data-target="#carousel-ex"></li>
        </ol>
        <div class="carousel-inner">
            <div class="item active"><img alt="abuja" class="img-responsive" id=
"afCountries" src="img/african-countries/abuja-nigeria.jpg">
                <div class="carousel-caption">
                    <h3>Abuja, Nigeria</h3>
                </div>
            </div>
            <div class="item"><img alt="accra" class="img-responsive" id="afCountries" src=
"img/african-countries/accra-ghana.jpg">
                <div class="carousel-caption">
                    <h3>Accra, Ghana</h3>
                </div>
            </div>
            <div class="item"><img alt="kigali" class="img-responsive" id="afCountries"
src="img/african-countries/kigali-rwanda.jpg">
                <div class="carousel-caption">
                    <h3>Kigali, Rwanda</h3>
                </div>
            </div>
            <div class="item"><img alt="durban" class="img-responsive" id="afCountries"
src="img/african-countries/durban-southafrica.jpg">
                <div class="carousel-caption">
                    <h3>Durban, South Africa</h3>
                </div>
            </div>
            <div class="item"><img alt="Johannesburg" class="img-responsive" id=
"afCountries" src="img/african-countries/Johannesburg-South_Africa.jpg">
                <div class="carousel-caption">
                    <h3>Johannesburg, South Africa</h3>
                </div>
            </div>
            <div class="item"><img alt="kenya" class="img-responsive" id="afCountries" src=
"img/african-countries/kenya.jpg">
                <div class="carousel-caption">
                    <h3>Kenya</h3>
                </div>
            </div>
        </div>
        <a class="left carousel-control" data-slide="prev" href=
"#carousel-ex"><span class="glyphicon glyphicon-chevron-left"></span></a>
        <a class="right carousel-control" data-slide="next" href=
"#carousel-ex"><span class=
"glyphicon glyphicon-chevron-right"></span></a>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">        </script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js">          </script>
</body>
</html>

【问题讨论】：

抱歉，我无法重现问题。我试图在 Bootply 上重现该问题：bootply.com/x9VUw3LOO6 使用不同的图像。我在谷歌上搜索了一些不同尺寸的图像进行测试，但唯一一次我在轮播中有一些方形框是在找不到图像的时候（我的图像 URL 地址错误）。因此，如果有人决定查看 Bootply 测试，请注意这些图像是我（迅速）选择的。

标签： twitter-bootstrap

【解决方案1】：

与 Jyrkim 类似，您的解决方案适用于 Bootply 和 JSFiddle 等编辑器。我唯一的想法是您缺少引导文件夹的字体部分。 White Squares 是当前字体类型中找不到的字符的占位符，例如自定义字体中的特殊字符。它可能呈现为[]，而不是* 或&。确保您在 Bootstrap 中的文件夹结构设置如下：

bootstrap
-> css
   -> bootstrap-theme.css
   -> bootstrap-theme.css.map
   -> bootstrap-theme.min.css
   -> bootstrap.css
   -> bootstrap.min.css
   -> theme.css
-> fonts
   -> glyphicons-halflings-regular.eot
   -> glyphicons-halflings-regular.svg
   -> glyphicons-halflings-regular.ttf
   -> glyphicons-halflings-regular.woff
-> js
   -> bootstrap.js
   -> bootstrap.min.js

我敢打赌fonts 文件夹不存在，或者链接不正确。如果你的文件夹结构和上面一样，你可以像这样链接.css文件：

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

希望有帮助！

注意

使用样式表的 CDN 版本不会导致这成为问题，但可能会增加加载时间。

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

【讨论】：

【解决方案2】：

Bootstrap 4 不支持 Glyphicons 但如果你想使用 Glyphicons 和 bootstrap 版本> 4 比基于此评论 https://stackoverflow.com/a/65588852/17053552 由于我使用的是 bootstrap 4.3.1v，因此我不应该更改整个 Bootstrap 版本或使用任何其他图标或下载额外文件来使图标正常工作我试过这样的事情：

在 bootstrap-datetimepicker.min.js 中检查图标


    icons: {
           previous: 'glyphicon glyphicon-chevron-left',
           next: 'glyphicon glyphicon-chevron-right',
       }

在 bootstrap-datetimepicker.min.css 中，我更改了内容从此：

     bootstrap-datetimepicker-widget table th.prev::after{content:"Previous Month"} 
   bootstrap-datetimepicker-widget table th.next::after{content:"Next Month"}

到这里：

    bootstrap-datetimepicker-widget table th.prev::after{content:"previous"} 
    bootstrap-datetimepicker-widget table th.next::after{content:"next"}

它对我有用。

【讨论】：