Bootstrap 3 Glyphicons are not working
Bootstrap 3 Glyphicons are not working
解答1
Note to readers: be sure to read @user2261073's comment and @Jeff's answer concerning a bug in the customizer. It's likely the cause of your problem.
The font file isn't being loaded correctly. Check if the files are in their expected location.
@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');
}
As indicated by Daniel, it might also be a mimetype issue. Chrome's dev tools show downloaded fonts in the network tab:
解答2
-If you followed the highest rated answer and it's still not working:
The Font
folder MUST be on the same level as your CSS folder. Fixing the path in bootstrap.css
will not work.
Bootstrap.css
has to navigate to the Fonts
folder exactly like this:
@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 3 Glyphicons are not working的更多相关文章
- Bootstrap 4 - Glyphicons migration?
https://stackoverflow.com/questions/32612690/bootstrap-4-glyphicons-migration Migrating from Glyphi ...
- 基于Metronic的Bootstrap开发框架经验总结(10)--优化Bootstrap图标管理
在基于Bootstrap开发的项目中,鲜艳颜色的按钮,以及丰富的图表是很吸引人的特点,为了将这个特点发挥到极致,可以利用Bootstrap图标抽取到数据库里面,并在界面中进行管理和使用,这样我们可以把 ...
- 【读书笔记《Bootstrap 实战》】6.单页营销网站
我们已经掌握了很多实用 Bootstrap 的重要技能.现在,是时候拿出更多的创意来帮助客户实现他们全方位在线营销的愿望了.此次将带领大家做一个漂亮的单页高端营销网站. 主要任务如下: □ 一个大型 ...
- Bootstrap组件
1.Bootstrap组件——Glyphicons图标字体 图标字体:可以表示的文字不是abcd或1234,而是一个又一个图形符号,比直接使用图片好处:可以任意放大不会失真:所有能使用文字的地方都可以 ...
- 基于Metronic的Bootstrap开发框架经验总结(4)--Bootstrap图标的提取和利用
在前面的一篇随笔<基于Metronic的Bootstrap开发框架经验总结(1)-框架总览及菜单模块的处理>介绍了菜单模块的处理,主要介绍如何动态从数据库里面获取记录并构建菜单列表.其中菜 ...
- Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound
今天查看网站的源代码,发现有个glyphicons-halflings-regular.woff文件没有找到,因为我的网站使用了bootstrap的Glyphicons 字体图标,因此需要加载Glyp ...
- 项目经验:Glyphicons字体图标改造,制造适合自己项目的字体图标
Bootstrap对我们来说已经不陌生了,大型的项目一定会用到它.它的DOM结构,字体图标,组件,响应式布局等,很大程度上提高了WEB开发速度. 在bootstrap刚出来的时候,它拥有丰富的组件.美 ...
- (转)Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound
http://blog.xmaoseo.com/glyphicons-halflings-regular-woff-font-404-notfound/ 今天查看网站的源代码,发现有个glyphico ...
- 【02】bootstrap起步
起步 简要介绍 Bootstrap,以及如何下载.使用,还有基本模版和案例,等等. 下载 Bootstrap (当前版本 v3.3.5)提供以下几种方式帮你快速上手,每一种方式针对具有不同技能等级的开 ...
随机推荐
- thinkpad开机引导方式变成PCI LAN选项解决
问题:开机的引导方式变成[PCI LAN],并且前面有一个小箭头,无法正常启动加载.在BIOS中重置调整启动顺序也无法解决.无法进入U盘启动盘 1.首先开机按F12进入BIOS,选择 APP Menu ...
- bzoj 2716 [Violet 3]天使玩偶 【CDQ分治】
KD-tree可做,但是我不会暂时不考虑 大意:在二维平面内,给定n个点,m个操作.操作A:加入一个点:操作B:询问一个点与平面上加入的点的最近距离 不封装会T不封装会T不封装会T不封装会T不封装会 ...
- Python解释器的安装步骤
Python是一门强大的语言,目前已支持所有主流操作系统,在Linux,Unix,Mac系统上自带Python环境,在Windows10系统上需要安装一下,超简单 1. 打开官网 https://w ...
- pip查看安装包的可安装版本
不需要下载或者安装任何其他软件包,你可以指定一个高得离谱的版本号( 不可能有实际安装候选),并且可用的版本将被打印: pip install scrapy==122222 得到信息后指定版本就好了 p ...
- github最值得收藏的Bootstrap3后台管理框架
1. AdminLTE AdminLTE是一个完全响应的后台管理模板.基于Bootstrap3框架.高度可定制,易于使用.适合许多屏幕分辨率从小型移动设备到大型台式机. GitHub AdminLTE ...
- Spring 2.5
Spring 2.5 中除了提供 @Component 注释外,还定义了几个拥有特殊语义的注释,它们分别是:@Repository.@Service 和 @Controller.在目前的 Spring ...
- AtCoder Grand Contest 010 F - Tree Game
题目传送门:https://agc010.contest.atcoder.jp/tasks/agc010_f 题目大意: 给定一棵树,每个节点上有\(a_i\)个石子,某个节点上有一个棋子,两人轮流操 ...
- php Try Catch多层级异常测试
<?php class a { public function a1 () { try { throw new Exception('123'); } catch (Exception $e) ...
- ping localhost出现地址::1
近期发现本机的localhost不好用了. 症状: 自己本机部署服务器时,浏览器地址栏访问localhost:8080不通: 禁用网络连接,未果: 拔出网线,OK. cmd里ping之,返回结果如下: ...
- Linux遗忘命令
1.查找文件的安装目录,拿nginx来说 find /|grep nginx.conf 2. a.查询某个端口是否被占用,如8080端口 netstat –apn | grep 8080 b.查看 ...