bootstrap 图标icon符号图标glyphicons不正常显示解决办法:

分享供各位参考:

1、在ff/http:的地址栏中输入“about:config”,即进入配置界面。

2、进入后,搜索“security.fileuri.strict_origin_policy”,这是该值应该是true。

3、双击该项,其值自动变为false,即可。

4、修改后,再刷新遇到问题的页面,即可看到正常显示的图标了。

探究问题原因:

1、由于ff/http:一个安全策略导致的。该策略限制了HTML文件访问不在根目录下的文件夹中的web fonts。

2、这种限制只在本地开发环境下,同时web fonts并未从远程获取时出现。

3、后来看了下前面提到的那个没有出现问题的bootstrap项目。

4、果然,其fonts文件夹被放置在了项目的根目录下。

5、这样即使不去改变上述安全策略,也是可以正常显示的。

6、@font-face地址:

@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.woff\') format(\'woff\'), url(\'../fonts/glyphicons-halflings-regular.ttf\') format(\'truetype\'), url(\'../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular\') format(\'svg\');
}

转自:https://blog.csdn.net/sinat_34719507/article/details/53512840