打开标志性引导程序不起作用

Question

我正在尝试将 open iconic 与 bootstrap 集成。当我在我的网络应用程序中使用时，图标不可见。

然后我创建了一个简单的 html，只有 bootstrap 和 openiconic 链接。它仍然不起作用，相同的设置在其他系统上工作（据我记得:)）。如果我在这里做错了什么，请指出我。

我在 windows 7、chorme 和 FF 上进行了测试。下面是 html

    <!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-slim.min.js"></script>
<script type="text/javascript" src="bootstrap-4.0.0/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha256-m/h/cUDAhf6/iBRixTbuc8+Rg2cIETQtPcH9D3p2Kg0=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic-bootstrap.min.css" integrity="sha256-BJ/G+e+y7bQdrYkS2RBTyNfBHpA9IuGaPmf9htub5MQ=" crossorigin="anonymous" />

</head>
<body>
<div class="container-fluid">
<span class="oi oi-pie-chart"></span>
<div class="row mt-12">
    <a class="btn btn-primary"><span class="oi oi-dashboard">Hello</span></a>

    <span class="oi" data-glyph="icon-name" title="icon name" aria-hidden="true"></span>
</div> 
</div>
</body>
</html>

截图

Answer 1

您的代码看起来工作正常：https://jsfiddle.net/h983kguj/

尝试运行这个 html 在 webserver 下。

根据以下评论，如果重置/重新安装浏览器无法解决此问题，请尝试其他浏览器，如果问题在所有浏览器上仍然存在这可能是您在 Windows 下的 字体的问题，特别是如果您尝试在 Windows.[= 本地安装该自定义字体时12=]

Answer 2

这很不正常，但是两个最新的浏览器同时出现问题，所以很难说是不是浏览器的问题。但是，是的，这是一个浏览器问题，我在敲了 5 个小时之后将 firefox 降级到 58.0.2（64 位）:( 现在图标出现了。我不确定 chrome，截至现在使用以上 FF 版本，祝你好运:)

打开标志性引导程序不起作用

open iconic bootsrap not working

html

css

glyphicons

bootstrap-4