gpt4 book ai didi

php - Bootstrap 3 字形图标在我放大和缩小之前不显示

转载 作者:行者123 更新时间:2023-11-28 10:47:25 27 4
gpt4 key购买 nike

由于某种原因,glyphicons 无法在我的 Chrome 或 Firefox 上正确加载,但它们似乎在 IE 上工作得很好(没有测试太多次,也许只是幸运)。

在我放大/缩小之前,字形图标不会显示在我的页面上。即使放大或缩小 10%,它们也会出现,当我恢复到正常尺寸 (100%) 时,它们仍然存在。但是,首次加载页面时我看不到它们。

我正在从 Bootstrap 页面测试以下模板:

http://getbootstrap.com/examples/carousel/

我所做的只是将 140x140 的标题图像替换为字形,并使用如下简单的示例代码将它们的大小调整为 90 像素:

span.glyphicon-globe {
font-size: 80px;
color: #EA8A46;
}

下面是我如何使用它们:

<div class="col-lg-4">
<span class="glyphicon glyphicon-star-empty"></span>
<h2>Test</h2>
<p>Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
<p><a class="btn btn-warning" href="#" role="button">więcej &raquo;</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<span class="glyphicon glyphicon-calendar"></span>
<h2>Test 2</h2>
<p>Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
<p><a class="btn btn-warning" href="#" role="button">więcej &raquo;</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<span class="glyphicon glyphicon-check"></span>
<h2>Test 3</h2>
<p>Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
<p><a class="btn btn-warning" href="#" role="button">więcej &raquo;</a></p>
</div><!-- /.col-lg-4 -->

模板上有这样的注释:

注意:如果您通过 file://URL 查看此页面,由于网络浏览器安全规则,左侧和右侧的“下一个”和“上一个”Glyphicon 按钮可能无法正确加载/显示.

但是我没有将它与 file:// 一起使用。问题出在本地主机和实时服务器上。我没有在 Bootstrap 页面上使用自定义程序,字体来自标准 .zip 文件。

如果您需要更多代码,我很乐意提供。

编辑:刚刚对 IE 和 Firefox 的新安装进行了更多测试,一切正常。难道只是 Chrome 吗?

最佳答案

检查字体是否被正确引用。这是通过 Bootstrap 上的自定义下载选项下载时注意到的一个问题。

@font-face {
font-family: 'Glyphicons Halflings';
src: url('Content/fonts/glyphicons-halflings-regular.eot');
src: url('Content/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded- opentype'), url('Content/fonts/glyphicons-halflings-regular.woff') format('woff'), url('Content/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('Content/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

如果不行,你也可以试试cdn。 Fiddle

关于php - Bootstrap 3 字形图标在我放大和缩小之前不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22917875/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com