logo标签列表

Bootstrap走马灯中的左右图标未显示？

twitter-bootstrap
17

两个左右箭头的 glyphicon 没有显示出来，它是可以工作的，但由于某种原因它会显示一个方框。当我点击那些 glyhicon 应该在的位置时，我可以滚动浏览图片，所以不对的只是 glyphicons 的外观，左右箭头没有显示出来。

<!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上使用不同的图像重现问题：http://www.bootply.com/x9VUw3LOO6。我谷歌搜索了一些不同大小的图像进行测试，但只有当找不到图像（我使用错误的URL地址）时，轮播中才会出现一些正方形框。因此，如果有人决定查看Bootply测试，请注意这些图像是由我（匆忙地）选择的。 - jyrkim
2个回答
27

与Jyrkim类似，您的解决方案适用于像Bootply和JSFiddle这样的示例编辑器。 我唯一的想法是您错过了Bootstrap文件夹中的字体部分。 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">
0

Bootstrap 4 不支持 Glyphicons，但如果你想在版本大于 4 的 Bootstrap 中使用 Glyphicons，可以参考这条回答 https://stackoverflow.com/a/65588852/17053552。因为我正在使用的是 bootstrap 4.3.1v，所以不必更改整个 Bootstrap 版本或使用其他图标或下载额外的文件来使图标工作。

  1. 在 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"}

    而且它对我起作用了。

    网页内容由stack overflow 提供, 点击上面的
    可以查看英文原文，
    原文链接