Bootstrap 字形图标显示错误的图像答案

【问题标题】：Bootstrap glyphicons are displaying wrong imagesBootstrap 字形图标显示错误的图像
【发布时间】：2018-06-08 17:31:46
【问题描述】：

下载 bootstrap 3.3.7 并解压所有文件，包括 css、fonts 和 js 文件夹。我将所有文件复制到 www/css 文件夹、www/js 和 www/css/fonts 在 index.html 中如下：

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

并在按钮上使用图标：

`<button type="button"><span class="glyphicon glyphicon-ok"></span>Yeah</button>
     <button type="button">span class="glyphicon glyphicon-remove"></span>Nope</button>
`

在android平台上的图标不能正常显示汉字，在iOS平台上显示其他花哨的图标，在windows平台上都没有显示。

我尝试从npm install bootstrap下载这只是将文件夹添加到 node_modules 并且任何方法都不起作用。不使用的原因

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

因为应用程序应该离线工作，所以将文件放在项目结构中。

请帮我解决这个问题。

【问题讨论】：

还包括字形的 css
没有 glyohicons 的 css 我可以知道你推荐了哪个 css 吗？ @maddy23285
打开浏览器开发工具，检查字体是否加载
@VilleKoo : 没用.. 询问我的层次结构哪里出了问题

标签： ios css windows bootstrap-modal glyphicons

【解决方案1】：

在 bootstrap.css 中检查这些行并相应地更正字体文件夹的路径：

    @font-face {
  font-family: 'Glyphicons Halflings';

  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

【讨论】：

正如我所见，您的 bootstrap.css 文件位于 css 文件夹下，而 fonts 文件夹也在 css 文件夹下。所以你的字体文件夹的路径应该是 src: url('fonts/glyphicons-halflings-regular.eot');.
@AndroidGeeks 学习如何使用开发工具，它会让你免于这样的麻烦:)
@VilleKoo：层次错误开发工具不建议它在 css 中

【解决方案2】：

删除 www 文件夹并将文件夹（css/js/fonts）与您的 html 代码一起作为引导的通用层次结构

【讨论】：

我的意思是你创建的整个文件结构的图片