微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > html教程 > 正文

firefox(ff)下无法显示bootstrap图标问题的解决方案_html/css_WEB-ITnose

php中文网
发布： 2016-06-24 11:49:34
原创
1267人浏览过

　　最近在一个基于bootstrap的项目中遇到了一个问题，问题的表现是无法显示bootstrap自带的那套名为“glyphicon”的图标，在图标的引用处显示的是一个小方块儿，里面隐约可见4个貌似为16进制的字符，如图所示：。好端端、现成儿的图标用不了，悲哀~

 

　　但在chrome和IE 10下面则是可以正常显示的，说明这个问题并不是因为使用不当、相关文件存储位置错误而导致。而且，在另一个基于同样版本bootstrap的项目中则没有遇到这个问题，怪哉~~

 

　　后在网上搜到了解决方案，在此分享以供各位遇到问题的同好参考：在ff的地址栏中输入“about:config”，即进入配置界面。进入后，搜索“security.fileuri.strict_origin_policy”，这是该值应该是true。双击该项，其值自动变为false，即可。修改后，再刷新遇到问题的页面，即可看到正常显示的图标了。

立即学习“前端免费学习笔记（深入）”；

神卷标书
神卷标书

神卷标书，专注于AI智能标书制作、管理与咨询服务，提供高效、专业的招投标解决方案。支持一站式标书生成、模板下载，助力企业轻松投标，提升中标率。

神卷标书 39
查看详情 神卷标书

 

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

 

　　后来看了下前面提到的那个没有出现问题的bootstrap项目。果然，其fonts文件夹被放置在了项目的根目录下。这样即使不去改变上述安全策略，也是可以正常显示的。

大家都在看：

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：移动设备页面高度不足时min-height 的尴尬处理_html/css_WEB-ITnose 下一篇：规范化css 命名（常用整理）_html/css_WEB-ITnose
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
HTML5代码如何实现文件上传 HTML5代码中File API的运用解析 使用FileAPI可实现文件读取与上传，通过input选择文件，FileReader读取内容并预览；2.支持图片预览、多文件处理及FormData异步上传。
2025-11-12 22:57:17
965
如何解决Vim HTML插件冲突的处理方法 首先确认冲突插件，如html5.vim与vim-polyglot；通过注释、:scriptnames和:verbosesetfiletype?排查；使用插件管理器控制加载顺序，如先载入vim-polyglot再加载emmet-vim；禁用重复功能，如设置g:polyglot_disabled=[‘html’]；通过autocmd按需加载并清除冗余映射，确保各插件协同工作。
2025-11-12 22:55:10
967
前台html如何显示_前端HTML页面显示与渲染优化方法 优化前端HTML渲染需缩短关键渲染路径，内联核心CSS、移除冗余代码、延迟非关键JS；预加载重要资源；简化DOM结构；压缩合并文件；使用高效CSS选择器；懒加载非首屏内容。
2025-11-12 22:52:02
451
html5怎么上传图片显示_HTML5图片预览与上传实现 使用input[type=file]选择图片，通过FileReader读取文件并预览；2.将文件转为base64显示在img标签中；3.用FormData和fetch将文件上传至服务器；4.可添加文件校验、多图上传和样式优化提升体验。
2025-11-12 22:49:02
535
html头部链接怎么打_html头部链接如何打专业教程 头部链接用于引入CSS、favicon、预加载资源等；2.使用标签设置rel属性实现不同功能；3.正确路径与属性配置确保资源正常加载与性能优化。
2025-11-12 22:39:02
637
html源码如何保存为静态网页_html源码保存为静态网页的方法 首先将HTML源码保存为.html文件，可通过文本编辑器、浏览器开发者工具、另存为功能或命令行工具实现，确保文件正确命名并包含所有资源。
2025-11-12 22:33:02
131
html模板转换器_html模板转换网页版平台 答案：https://www.htmleasyconvert.com是一个在线HTML模板转换平台，支持将静态HTML转为响应式网页，提供可视化编辑、多设备适配、一键导出代码包及批量处理功能，无需安装软件即可在线操作。
2025-11-12 22:27:02
298
HTML5在线如何优化页面加载速度 HTML5在线性能提升的实用策略 压缩合并CSS、JS和图片，减少资源体积与HTTP请求；2.启用Gzip/Brotli压缩及WebP格式，提升传输效率；3.使用懒加载与响应式图片优化图像加载；4.设置缓存头、ServiceWorker和本地存储增强缓存；5.减少DOM操作、使用CSS3动画和requestAnimationFrame优化渲染。
2025-11-12 22:25:02
1002
如何使用HTML构建新闻列表页面的详细教程 神舟二十号因太空碎片撞击推迟返回，中国航天从容应对。太空碎片威胁巨大，而中国早已为此做好长期准备，展现了成熟的太空应急能力。
2025-11-12 22:23:08
130
如何通过HTML5 Figure元素标注图片的详细步骤 答案：使用figure元素标注独立内容并配合figcaption添加说明。1.用figure包裹img表示独立内容；2.在figure内添加figcaption描述图片，通常置于下方；3.确保img有alt属性，figcaption补充而非重复alt文本，避免放置装饰性图片；4.可为figure添加class或id以便CSS样式控制，提升可访问性和结构清晰度。
2025-11-12 22:07:36
776
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部