Bootstrap 字形显示错误的图像

Question

已下载 bootstrap 3.3.7 并提取所有文件，其中包括 css、字体和 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">`

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

请帮我解决这个问题。

Answer 1

删除 www 文件夹并将文件夹 (css/js/fonts) 与您的 html 代码放在一起作为 bootstrap

的通用层次结构

Answer 2

检查 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 字形显示错误的图像

Bootstrap glyphicons are displaying wrong images

css

windows

ios

glyphicons

bootstrap-modal