Bootstrap Glyphicons显示错误的图像



下载了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">`

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

请帮助我解决此问题。

在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');
}

删除www文件夹,并将文件夹(CSS/js/fonts)与您的HTML代码一起放置为Bootstrap的常见层次结构

最新更新