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; 来做省略表示. 先平铺 ...
随机推荐
- windows下zookeeper伪集群搭建
下载 http://www.apache.org/dyn/closer.cgi/zookeeper/ 解压 D:\Java\soft\zookeeper-3.4.6 伪集群 1.在 \zookeepe ...
- 如何配置Hyper-V的虚拟机通过主机网络上网 (NAT)
前言 最近开始在Windows 8 上面直接使用Hyper-V的技术来建立虚拟环境进行开发和测试,这样免去了再安装额外软件的需要.在实际使用的时候,尤其是配置网络共享的时候,遇到些问题,与其他一些虚拟 ...
- PHP的学习--PHP的闭包
php的闭包(Closure)也就是匿名函数,是PHP5.3引入的. 闭包的语法很简单,需要注意的关键字就只有use,use是连接闭包和外界变量. $a = function() use($b) {} ...
- 从css3书写顺序引出来的border-radius参数
本鱼表示偶已经不会取标题了... 当时写这篇文章主要是想探讨一下优雅降级和渐进增强的区别,按照正常的逻辑思维,不管是降级还是增强,应该对于效果是没什么区别的,因为后者会覆盖前者,但今天无意看到张鑫旭的 ...
- [转载]TFS源代码管理
以下主要描述了: TFS源代码控制系统的基本场景 如何把一个项目添加到源代码管理中 如何与服务器同步 如何做Check-In 如何做分支与合并 什么是上架与下架 我们知道工作项是项目管理的基本元素,但 ...
- Bounce.js – 快速创建漂亮的 CSS3 动画效果
Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...
- 【转】图文详解YUV420数据格式
YUV格式有两大类:planar和packed. 对于planar的YUV格式,先连续存储所有像素点的Y,紧接着存储所有像素点的U,随后是所有像素点的V.对于packed的YUV格式,每个像素点的Y, ...
- NET实现微信公共平台上传下载多媒体文件(转)
举个例子,有人对着我们的公共微信号拍个照片发送过来,然后我们处理这个照片,比如进行ocr识别字(随后就会降到这个例子),或者人脸识别,或者拍照取证等,这些功能都是相当有用的.那么我们现在就要分析一下这 ...
- java变量的加载顺序
学习编程思想 package com.test.java.classs; /** * Created by Administrator on 2015/12/7. * 在类的内部,变量定义的顺序决定了 ...
- 实现iOS图片等资源文件的热更新化(一): 从Images.xcassets导出合适的图片
本文会基于一个已有的脚本工具自动导出所有的图片;最终给出的是一个从 Images.xcassets 到基于文件夹的精简 合适 的图片资源集的完整过程.难点在于从完整图片集到精简图片集,肯定是基于一个定 ...