Bootstrap glyphicons显示错误的图像

问题描述 投票:0回答:2

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

因为应用程序应该在脱机工作,所以将文件放在项目结构中

请帮我解决这个问题。

ios css windows bootstrap-modal glyphicons
2个回答
3
投票

检查bootstrap.css中的这些行并相应地纠正fonts文件夹的路径:

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

0
投票

删除www文件夹并将文件夹(css / js / fonts)与您的html代码一起作为其引导程序的公共层次结构

© www.soinside.com 2019 - 2024. All rights reserved.