bootstrap字体图标在谷歌显示正常,在火狐显示异常的问题
bootstrap字体图标的使用
- 现在有很多的网站支持字体图标,我所知道的有bootstrap,fontawesome,iconmoon,等等,可能还有其他我并不知道
- bootstrap只要你的文件夹目录中有fonts文件夹,并且在头部引入bootstrap.min.css文件,就可以在html中使用字体图标了
- 创建字体图标你需要创建一个span标签, 然后给该标签加上相应的类名,具体的类名去官网中的组件中去找,找到你需要的图标之后只要把图标下面的一堆字母全部复制,然后粘贴到span的class中就一切搞定
fontawesome使用
这个的使用也比较简单,首先去官网下载他的一套东西,下载的时候直接选择no,thanks,justdownload就可以了
然后就同理了,同样是把fonts文件夹放到你的项目文件夹中,然后在html中引入他的css文件,你就可以使用了
他需要的是一个i标签,不过道理是一样的。
引入css文件的目的最主要的就是需要
@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.woff2') format('woff2'), 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');
}
[class^="icon-"],
[class*=" icon-"] {
font-family: "media";
font-style: normal;
display: inline-block;
width: 1em;
text-align: center;
margin-right: 20px;
} .icon-globe:before {
content: '\e800';
font-size: 15px;
} .icon-window-maximize:before {
content: '\f2d0';
}
/*content中使用的图标需要自己在网站案例中找,bootstrap和fontAwesome中都不需要,使用的时候使用<i>标签加个类名为icon-globe就可以出现了*/
iconmoon 的使用
- 这个我只说一点,就是我也没用过,不过看起来他可以自己制作字体图标,需要用一个svg的文件进行转换,感兴趣的同学可以看下
遇到的问题
- 今天遇到了一个浪费我很长时间的一个问题:那就是在谷歌的时候字体图标是没问题的,但是到了火狐浏览器就是没办法显示
- 第一种可能是网络问题,把源代码的那几个Glyphicons 图标的字体下载下来,覆盖掉原来。
- 第二种可能是bootstrap官网的文件不全,需要去github上去下载完整版(ps:这一点我并没有证实,因为我看到是一样的文件)
- 第三种*{font-family:"FontAwesome","微软雅黑"!important},font-family中加入你使用的字体图标文件的名字,bootstrap用的是Glyphicons Halflings,微软雅黑也是可选任意你需要的字体
- 实在不行就去fontello去找自己需要的下载
- 最后一种就是我今天遇到的,在本地测试的时候火狐就是不可以,需要将html文件和fonts文件夹放到同级目录,这样就可以搞定了,同时需要注意的是在线上的时候不需要放到同级目录也可以实现,这个可能和火狐的一些内部跨域机制有关系,没有再深入的研究,所以我不瞎说了,哈哈
以上的总结并一定完整,有知道的同学可以随时留言告诉我,大家一起进步
bootstrap字体图标在谷歌显示正常,在火狐显示异常的问题的更多相关文章
- bootstrap字体图标
bootstrap字体图标 http://v3.bootcss.com/components/ <!DOCTYPE HTML> <html> <head> < ...
- Bootstrap 字体图标、下拉菜单、按钮组
Bootstrap 字体图标(Glyphicons) 需要引入fonts文件夹中的文件,而且该文件夹必须命名为fonts,然后引进css文件,jQuery文件,以及bootstrap的js文件. 用法 ...
- 解决本地Bootstrap字体图标不可见的问题
原文:https://www.jianshu.com/p/70ac459d33e7 作为Bootstrap的初学者,我最近遇到了一个问题:在使用Bootstrap字体图标时,图标不可见.使用代码如下: ...
- BootStrap字体图标不显示、下拉菜单不显示
在W3CSchool学习BootStrap教程时遇到的问题…… 1.字体图标不能显示 上面是正常显示的样子,不能正常显示,因为缺少下面的字体图标样式文件 (1)在下载的Bootstrap包中将font ...
- bootstrap字体图标不正常显示的原因
本地引入bootstrap.css文件,使用https://v3.bootcss.com/components/站点 字体图标 时不能正常显示,换成 bootstrap 官网的 cdn 链接却能正常显 ...
- bootstrap 字体图标
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Bootstrap 字体图标(Glyphicons)
http://www.runoob.com/bootstrap/bootstrap-glyphicons.html 什么是字体图标? 字体图标是在 Web 项目中使用的图标字体.虽然,Glyphico ...
- bootstrap字体图标在IE上不显示
最简单的办法就是直接下载最新的bootstrap.css替换掉旧的. 但是由于我做的项目直接替换会出现样式冲突问题,因此只好慢慢找是什么属性导致图标不显示,最后找到了解决办法: 1.首先保字体文件的位 ...
- 基于 bootstrap 字体图标,用纯CSS实现星级评分功能
需要用到的图标 实现原理 关键属性是 text-overflow: clip;,表示直接截断文本.我们经常用这个属性的另一个值 text-overflow: ellipsis; 来做省略表示. 先平铺 ...
随机推荐
- CSS3妙用
scaleX的妙用 案例1 效果: HTML: <a href="javascript:;">我有下划线噢</a> CSS: a{ text-decorat ...
- jsp获得文件的绝对路径
当前WEB应用的物理路径:<%=application.getRealPath("/")%>当前访问的JSP文件的物理路径:<%=application.getR ...
- Mina、Netty、Twisted一起学(七):发布/订阅(Publish/Subscribe)
消息传递有很多种方式,请求/响应(Request/Reply)是最常用的.在前面的博文的例子中,很多都是采用请求/响应的方式,当服务器接收到消息后,会立即write回写一条消息到客户端.HTTP协议也 ...
- Java多线程系列--“JUC集合”04之 ConcurrentHashMap
概要 本章是JUC系列的ConcurrentHashMap篇.内容包括:ConcurrentHashMap介绍ConcurrentHashMap原理和数据结构ConcurrentHashMap函数列表 ...
- nodejs 调试 node-inspector包
nodejs 调试调试比较麻烦,让习惯了用chrome浏览器调试的前端同学来说有点不适用 node-inspector这个包让我们可以在chrome上像调试前端代码一样来调试nodejs 1.全局 ...
- Spring MVC异常处理详解
Spring MVC中异常处理的类体系结构 下图中,我画出了Spring MVC中,跟异常处理相关的主要类和接口. 在Spring MVC中,所有用于处理在请求映射和请求处理过程中抛出的异常的类,都要 ...
- Java之HashMap在多线程情况下导致死循环的问题
PS:不得不说Java编程思想这本书是真心强大.. 学习内容: 1.HashMap<K,V>在多线程的情况下出现的死循环现象 当初学Java的时候只是知道HashMap<K,V& ...
- Windows Azure Cloud Service (39) 如何将现有Web应用迁移到Azure PaaS平台
<Windows Azure Platform 系列文章目录> 本文将简单介绍,如何将企业内现有的ASP.NET应用程序迁移到Azure PaaS平台. 因为在迁移过程中,可能需要对现有的 ...
- java基础题目总结
有些基础题目由于工作中用的比较少但却又是不可少的,这样回答起来就会反应慢,不确定,不准确,特此开了文章记录遇到的不确定或者回答比较拗口的问题. 1.servlet是单例的吗,是安全的吗,是多线程吗 s ...
- C#中enum类型
最近碰到了枚举类型,就顺便整理下. 枚举的基类Enum,可以是除 Char 外的任何整型.不做显示声明的话,默认是整形(Int32). 声明一个Enum类型: /// <summary> ...