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的更多相关文章

  1. Bootstrap 4 - Glyphicons migration?

     https://stackoverflow.com/questions/32612690/bootstrap-4-glyphicons-migration Migrating from Glyphi ...

  2. 基于Metronic的Bootstrap开发框架经验总结(10)--优化Bootstrap图标管理

    在基于Bootstrap开发的项目中,鲜艳颜色的按钮,以及丰富的图表是很吸引人的特点,为了将这个特点发挥到极致,可以利用Bootstrap图标抽取到数据库里面,并在界面中进行管理和使用,这样我们可以把 ...

  3. 【读书笔记《Bootstrap 实战》】6.单页营销网站

    我们已经掌握了很多实用 Bootstrap  的重要技能.现在,是时候拿出更多的创意来帮助客户实现他们全方位在线营销的愿望了.此次将带领大家做一个漂亮的单页高端营销网站. 主要任务如下: □ 一个大型 ...

  4. Bootstrap组件

    1.Bootstrap组件——Glyphicons图标字体 图标字体:可以表示的文字不是abcd或1234,而是一个又一个图形符号,比直接使用图片好处:可以任意放大不会失真:所有能使用文字的地方都可以 ...

  5. 基于Metronic的Bootstrap开发框架经验总结(4)--Bootstrap图标的提取和利用

    在前面的一篇随笔<基于Metronic的Bootstrap开发框架经验总结(1)-框架总览及菜单模块的处理>介绍了菜单模块的处理,主要介绍如何动态从数据库里面获取记录并构建菜单列表.其中菜 ...

  6. Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound

    今天查看网站的源代码,发现有个glyphicons-halflings-regular.woff文件没有找到,因为我的网站使用了bootstrap的Glyphicons 字体图标,因此需要加载Glyp ...

  7. 项目经验:Glyphicons字体图标改造,制造适合自己项目的字体图标

    Bootstrap对我们来说已经不陌生了,大型的项目一定会用到它.它的DOM结构,字体图标,组件,响应式布局等,很大程度上提高了WEB开发速度. 在bootstrap刚出来的时候,它拥有丰富的组件.美 ...

  8. (转)Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound

    http://blog.xmaoseo.com/glyphicons-halflings-regular-woff-font-404-notfound/ 今天查看网站的源代码,发现有个glyphico ...

  9. 【02】bootstrap起步

    起步 简要介绍 Bootstrap,以及如何下载.使用,还有基本模版和案例,等等. 下载 Bootstrap (当前版本 v3.3.5)提供以下几种方式帮你快速上手,每一种方式针对具有不同技能等级的开 ...

随机推荐

  1. BZOJ3990 排序

    题目:www.lydsy.com/JudgeOnline/problem.php?id=3990 这题很不错. 刚开始时无从下手,想了好多$O((2^n)log(2^n))$ 的idea,但是都不行. ...

  2. Python网络爬虫之BeautifulSoup模块

    一.介绍: Beautiful Soup 是一个可以从HTML或XML文件中提取数据的Python库.它能够通过你喜欢的转换器实现惯用的文档导航,查找,修改文档的方式.Beautiful Soup会帮 ...

  3. 用动态链表high-poj 1528

    //2333333 题目超级水,但是!刚学了链表拿来high一high也不错啊. #include <iostream> #include <stdio.h> #include ...

  4. mui中一级联动

    <!doctype html><html> <head> <meta charset="utf-8"> <title>& ...

  5. Nginx系列篇一:linux中安装Nginx

    提示: 如遇到yum或者wget的问题, 请详见--->杂集:更换centos yum源 请详见--->杂集:关于VMware中linux使用NAT模式配置 1.安装nginx需要的环境 ...

  6. 轻松搞定JSONP跨域请求【转】,文章非常好!

    http://blog.csdn.net/u014607184/article/details/52027879

  7. Milking Grid POJ - 2185 || 最小覆盖子串

    Milking Grid POJ - 2185 最小覆盖子串: 最小覆盖子串(串尾多一小段时,用前缀覆盖)长度为n-next[n](n-pre[n]),n为串长. 当n%(n-next[n])==0时 ...

  8. P2044 随机数生成器

    链接:https://www.luogu.org/problem/show?pid=2044#sub 题目描述 栋栋最近迷上了随机算法,而随机数是生成随机算法的基础.栋栋准备使用线性同余法(Linea ...

  9. C#: static关键字的作用(转)

    C#: static关键字的作用   static意思是静态,可以修饰类.字段.属性.方法 标记为static的就不用创建实例对象调用了,可以通过类名直接点出来 static三种用法: 1.用于变量前 ...

  10. Dapper系列之三:Dapper的事务修改与删除

    Dapepr的Update和Delete Dapper入门Dapper查询 上两篇文章我们介绍Dapper中添加和查询.本篇文章我们继续讲解修改和删除....如果本篇文章看不懂,请看阅读上两篇Dapp ...