Question

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

<!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>

Answer 1

与Jyrkim类似，您的解决方案适用于Bootply和JSFiddle等编辑器。我唯一的想法是你错过了bootstrap文件夹的fonts部分。 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">

引导左右字形没有显示在旋转木马上？

1 个答案: