Question

html页面中的bootstrap 图标不正常显示，谁可以帮忙解决一下？

Answer 1

html页面中的bootstrap 图标不正常显示的解决方法：

1、其fonts文件夹被放置在了项目的根目录下，可以正常显示，即可。

2、修改后，再刷新遇到问题的页面，其值自动变为false：在ff的地址栏中输入“about:config”，即进入配置界面。

3、进入配置界面后，搜索“security.fileuri.strict_origin_policy”，这是该值应该是true。双击该项，即可看到正常显示的图标了。

出现html页面中的bootstrap 图标不正常显示这种情况的原因：

是ff的一个安全策略导致的，该策略限制了HTML文件访问不在根目录下的文件夹中的web fonts。这种限制只在本地开发环境下，同时web fonts并未从远程获取时出现。

Answer 2

按F12你会发现有报错信息，然后你根据目录 就可以导入（其实只要在导入fonts目录下所有文件就行了，fonts目录跟CSS目录是同一级，而fonts的文件由一开始下载的bootstrap携带）

Answer 3

将bootstrap3中的fonts文件（里面有glyphicons-halflings-regular）放到css同级，虽然你导入了css，但还是需要图片的，在css文件里其实写了图片的路径，这和jquery easyui一样。

Answer 4

把fonts文件夹和css放在同一级
<span class="input-group-addon"><i class=" glyphicon glyphicon-wrench"></i></span>
注意是glyphicon glyphicon-wrench，不是glyphicon-wrench

Answer 5

在网上搜到了解决方案，在此分享以供各位遇到问题的同好参考：在ff的地址栏中输入“about:config”，即进入配置界面。进入后，搜索“security.fileuri.strict_origin_policy”，这是该值应该是true。双击该项，其值自动变为false，即可。修改后，再刷新遇到问题的页面，即可看到正常显示的图标了。
　　那是什么原因导致了这个问题的出现呢？原因是ff的一个安全策略导致的。该策略限制了HTML文件访问不在根目录下的文件夹中的web fonts。这种限制只在本地开发环境下，同时web fonts并未从远程获取时出现。
　　后来看了下前面提到的那个没有出现问题的bootstrap项目。果然，其fonts文件夹被放置在了项目的根目录下。这样即使不去改变上述安全策略，也是可以正常显示的。