BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法

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

以上所述是小编给大家介绍的BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • BootStrap glyphicons 字体图标实现方法

    BootStrap glyphicons 字体图标实现方法

    相关阅读: 详解Bootstrap glyphicons字体图标 先给大家说下什么是字体图标? 字体图标是在 Web 项目中使用的图标字体.虽然,Glyphicons Halflings 需要商业许可,但是您可以通过基于项目的 Bootstrap 来免费使用这些图标. 为了表示对图标作者的感谢,希望您在使用时加上 GLYPHICONS 网站的链接. 使用bootstrap很久了,内置的 glyphicons 图标,足以满足 小型项目的需求.只需要使用一个样式,即可调出图标.虽然感觉很神奇,一直没

  • 详解Bootstrap glyphicons字体图标

    详解Bootstrap glyphicons字体图标

    本章将讲解字体图标(Glyphicons),并通过一些实例了解它的使用.Bootstrap 捆绑了 200 多种字体格式的字形.首先让我们先来理解一下什么是字体图标. 首先给大家介绍什么是字体图标: 字体图标是在 Web 项目中使用的图标字体.字体图标在下载的Bootstrap的fonts文件夹中. .glyphicon { position: relative; top: 1px; display: inline-block; font-family: 'Glyphicons Halfling

  • 很不错的两款Bootstrap Icon图标选择组件

    很不错的两款Bootstrap Icon图标选择组件

    一.Bootstrap icon picker组件 这个组件是在github上面搜索的时候找到的,初初看上去,确实是很不错的,并且是基于bootstrap风格的,所以更加适合使用bootstrap风格布局的项目.既然是github上面的,毋庸置疑,这是一个开源组件,源码地址.好了,说了这么多,一起来看看它到底长啥样子吧. 1.组件效果预览 第一次初始化 支持"上一页"和"下一页" 支持自定义图标的选择 支持模糊搜索图标,比如我们搜索camera 选择图标后对应的样式

  • BootStrap glyphicon图标无法显示的解决方法

    BootStrap glyphicon图标无法显示的解决方法

    如果不注意bootstrap引入css和fonts的规范,则可能会导致bootstrap 在显示glyphicon图标时无法正常显示,显示为方框. 此时可搜索bootstrap.css中的.glyphicon,可发现其大约上下10行左右有引入字体的URL,如下所示: 确保该目录存在即可. 通常出错是因为路径不正确所致. 以上所述是小编给大家介绍的BootStrap glyphicon图标无法显示的解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家

  • JS组件系列之Bootstrap Icon图标选择组件

    JS组件系列之Bootstrap Icon图标选择组件

    前言:最近好多朋友在群里面聊到bootstrap icon图标的问题,比如最常见的菜单管理,每个菜单肯定需要一个对应的菜单图标,要是有一个可视化的图标选择组件就好了,最好是直接选择图标,就能得到对应的class样式.于是乎各种百度,皇天不负有心人,最后被博主找到了,感觉效果还不错,并且支持自定义的图标,今天就拿出来分享下,绝对的干货哦! 一.Bootstrap icon picker组件 这个组件是在github上面搜索的时候找到的,初初看上去,确实是很不错的,并且是基于bootstrap风格的

  • Bootstrap3 input输入框插入glyphicon图标的方法

    Bootstrap3 input输入框插入glyphicon图标的方法

    bootstrap3如何在input输入框插入glyphicon图标呢?插入图标看起来比较醒目,满足用户体验价值观,此功能应用于各大网站. 怎么把图标放在输入框的开头?? <div class="form-group has-feedback"> <label class="col-md-2 control-label" for="username">用户名</label> <div class=&quo

  • BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法

    bootstrap 图标icon符号图标glyphicons不正常显示解决办法如下所示: 分享供各位参考: 1.在ff/http:的地址栏中输入"about:config",即进入配置界面. 2.进入后,搜索"security.fileuri.strict_origin_policy",这是该值应该是true. 3.双击该项,其值自动变为false,即可. 4.修改后,再刷新遇到问题的页面,即可看到正常显示的图标了. 探究问题原因: 1.由于ff/http:一个安全

  • Bootstrap页面缩小变形的快速解决办法

    Bootstrap页面缩小变形的快速解决办法

    bootstrap布局是应用得很广泛的一种网页布局方法,例如:我们用一种中间内容很流行的布局分布:3-6-3式布局.代码如下 <style type="text/css"> body{width:1350px; } header{ background-color:#d9534f; height:120px; } .center{ background-color:#31b0d5; border:1px solid #ff0000; height:300px; margin

  • bootstrap折叠调用collapse()后data-parent不生效的快速解决办法

    今天做的项目,用到了bootstrap的折叠功能,这个功能需要只展开一个折叠框,点击一个就会自动隐藏另一个,初始按照API做了一下,发现一切运行正常,但是测试的同事提了一个bug,说切换到其他模块后再切换回来,发现原先展开的折叠框没有折叠起来--即恢复原样.于是又去修改代码,回来的时候对所有折叠框调用: .collapse('hide')方法. $(".love .collapse").collapse('hide'); 调用之后发现,点击连接苗,data-parent失效了,也就是可

  • 使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法

    根据网上查找到的 typeahead使用方法,到最后一步时就出错,数据能从数据库读取出来,但在输入框显示提示时,全都显为:underfined.捉摸了半天都发现不了问题出在哪儿.后来在http://blog.64cm.com/post/2014/08/13/%E4%BD%BF%E7%94%A8bootstrap-typeahead%E6%8F%92%E4%BB%B6 上不经意发现这么一句话:"在当前版本的typeahead中,已经不再支持在source属性中直接调用ajax方法获取数据源了.&q

  • Bootstrap开发中Tab标签页切换图表显示问题的解决方法

    Bootstrap开发中Tab标签页切换图表显示问题的解决方法

    前言 在做响应式页面的时候,往往需要考虑更多尺寸设备的界面兼容性,一般不能写死像素,以便能够使得界面元素能够根据设备的不同进行动态调整,但往往有时候还是碰到一些问题,如Tab标签第一页面正常显示,但是切换其他页面的时候显示内容没有发生动态的调整,本篇随笔介绍解决Tab标签页切换图表显示问题,以及图表控件可以实现窗口动态变化进行调整尺寸. 1)常规的图表处理 例如下面界面有两个Tab标签页,如下所示,第一个标签页显示正常. 部分界面代码如下所示 <div class="portlet-bod

  • Bootstrap免费字体和图标网站(值得收藏)

    Bootstrap免费字体和图标网站(值得收藏)

    如果你正在寻找Bootstrap图标,那今天的推荐对你而言绝对非常重要!在这篇内容中,我们把这套框架上的免费字体图标做了个整合(当然,以后还会不断的更新).正如你所知,图标字体在一个web网页设计拥有很多优势:它们使用方便,不仅仅是图像,更是一个载体.大小随意缩放,还可以适应各种尺寸的屏幕(包含移动设备,平板电脑等). 这套集合图标使用起来非常的方便:你只需要点击下载包,将文件添加到你的目录中.在介绍中我们也会对每一个图标有一个简短的描述,让你了解如何使用它们.如果你有兴趣收藏,也可以自己创建一

  • 本地Bootstrap文件字体图标引入却无法显示问题的解决方法

    本地Bootstrap文件字体图标引入却无法显示问题的解决方法

    你在使用bootstrap字体图标的时候,是否遇到引用本地Bootstrap文件无法显示字体图标,而使用CDN服务器上bootstrap却能正常显示的问题. 在不能正常显示的时候,比如我要在一个按钮中使用一个√的字体图标,我的代码是这样子的: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>bootstrap字体图标

  • BootStrap中的Fontawesome 图标

    BootStrap中的Fontawesome 图标

    终于暂时的结束了winform迎来了B/S的项目,这个需要我们自己写前端页面,要用bootstrap搭页面,本人小白,正在慢慢摸索中,主要记录遇到的问题,及解决办法. 第一个,显示时间选择的控件.我在网上也搜了好多相关组件,但是可能跟我之前引入的js和css有冲突,所以出来的格式一直不对.后来就重新建了一个页面,专门显示datetimepicker,这次很容易就出来了. @section CSS{ <link href="~/Content/admin/css/bootstrap-date

  • 在Vue中使用icon 字体图标的方法

    1.使用线上的阿里iconfont图标库 1.打开 iconFont官网 选择自己喜欢的图标,并且添加购物车 2.点击购物车,添加至项目 3 生成链接 4在我们的vue项目中,找到index.html文件,引入css样式,记住这里要放上你的链接地址 5接下来我们就可以在任何组件地方使用我们的图标了,我这里就是用上面生成的三个图标其中的一个. 2但是考虑网络及用户体验 阿里iconfont下载本地使用 1 阿里iconfont图标直接下载到本地 2 在assets文件下创建iconfont文件夹

  • 解决layer图标icon不加载的问题

    之前在项目中使用layer弹框感觉体验很好,这次的项目中就引入了,但是引入之后,弹出层如下图: 代码: layer.msg("密码不正确!", {icon:5,time:1000}); 并没有显示出图标! F12查看才发现如下报错: http://127.0.0.1:8020/xxx/js/theme/default/layer.css?v=3.1.1 net::ERR_ABORTED layer.js 于是找到 layer.js,搜索 layer.css ,会搜索到两处地方,修改第二

随机推荐