bootstrap字体图标的使用

  1. 现在有很多的网站支持字体图标,我所知道的有bootstrapfontawesome,iconmoon,等等,可能还有其他我并不知道
  2. bootstrap只要你的文件夹目录中有fonts文件夹,并且在头部引入bootstrap.min.css文件,就可以在html中使用字体图标了
  3. 创建字体图标你需要创建一个span标签, 然后给该标签加上相应的类名,具体的类名去官网中的组件中去找,找到你需要的图标之后只要把图标下面的一堆字母全部复制,然后粘贴到span的class中就一切搞定

fontawesome使用

  1. 这个的使用也比较简单,首先去官网下载他的一套东西,下载的时候直接选择no,thanks,justdownload就可以了

  2. 然后就同理了,同样是把fonts文件夹放到你的项目文件夹中,然后在html中引入他的css文件,你就可以使用了

  3. 他需要的是一个i标签,不过道理是一样的。

  4. 引入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 的使用

  1. 这个我只说一点,就是我也没用过,不过看起来他可以自己制作字体图标,需要用一个svg的文件进行转换,感兴趣的同学可以看下

遇到的问题

  1. 今天遇到了一个浪费我很长时间的一个问题:那就是在谷歌的时候字体图标是没问题的,但是到了火狐浏览器就是没办法显示

    • 第一种可能是网络问题,把源代码的那几个Glyphicons 图标的字体下载下来,覆盖掉原来。
    • 第二种可能是bootstrap官网的文件不全,需要去github上去下载完整版(ps:这一点我并没有证实,因为我看到是一样的文件)
    • 第三种*{font-family:"FontAwesome","微软雅黑"!important},font-family中加入你使用的字体图标文件的名字,bootstrap用的是Glyphicons Halflings,微软雅黑也是可选任意你需要的字体
    • 实在不行就去fontello去找自己需要的下载
    • 最后一种就是我今天遇到的,在本地测试的时候火狐就是不可以,需要将html文件和fonts文件夹放到同级目录,这样就可以搞定了,同时需要注意的是在线上的时候不需要放到同级目录也可以实现,这个可能和火狐的一些内部跨域机制有关系,没有再深入的研究,所以我不瞎说了,哈哈

以上的总结并一定完整,有知道的同学可以随时留言告诉我,大家一起进步

bootstrap字体图标在谷歌显示正常,在火狐显示异常的问题的更多相关文章

  1. bootstrap字体图标

    bootstrap字体图标 http://v3.bootcss.com/components/ <!DOCTYPE HTML> <html> <head> < ...

  2. Bootstrap 字体图标、下拉菜单、按钮组

    Bootstrap 字体图标(Glyphicons) 需要引入fonts文件夹中的文件,而且该文件夹必须命名为fonts,然后引进css文件,jQuery文件,以及bootstrap的js文件. 用法 ...

  3. 解决本地Bootstrap字体图标不可见的问题

    原文:https://www.jianshu.com/p/70ac459d33e7 作为Bootstrap的初学者,我最近遇到了一个问题:在使用Bootstrap字体图标时,图标不可见.使用代码如下: ...

  4. BootStrap字体图标不显示、下拉菜单不显示

    在W3CSchool学习BootStrap教程时遇到的问题…… 1.字体图标不能显示 上面是正常显示的样子,不能正常显示,因为缺少下面的字体图标样式文件 (1)在下载的Bootstrap包中将font ...

  5. bootstrap字体图标不正常显示的原因

    本地引入bootstrap.css文件,使用https://v3.bootcss.com/components/站点 字体图标 时不能正常显示,换成 bootstrap 官网的 cdn 链接却能正常显 ...

  6. bootstrap 字体图标

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. Bootstrap 字体图标(Glyphicons)

    http://www.runoob.com/bootstrap/bootstrap-glyphicons.html 什么是字体图标? 字体图标是在 Web 项目中使用的图标字体.虽然,Glyphico ...

  8. bootstrap字体图标在IE上不显示

    最简单的办法就是直接下载最新的bootstrap.css替换掉旧的. 但是由于我做的项目直接替换会出现样式冲突问题,因此只好慢慢找是什么属性导致图标不显示,最后找到了解决办法: 1.首先保字体文件的位 ...

  9. 基于 bootstrap 字体图标,用纯CSS实现星级评分功能

    需要用到的图标 实现原理 关键属性是 text-overflow: clip;,表示直接截断文本.我们经常用这个属性的另一个值 text-overflow: ellipsis; 来做省略表示. 先平铺 ...

随机推荐

  1. CSS3妙用

    scaleX的妙用 案例1 效果: HTML: <a href="javascript:;">我有下划线噢</a> CSS: a{ text-decorat ...

  2. jsp获得文件的绝对路径

    当前WEB应用的物理路径:<%=application.getRealPath("/")%>当前访问的JSP文件的物理路径:<%=application.getR ...

  3. Mina、Netty、Twisted一起学(七):发布/订阅(Publish/Subscribe)

    消息传递有很多种方式,请求/响应(Request/Reply)是最常用的.在前面的博文的例子中,很多都是采用请求/响应的方式,当服务器接收到消息后,会立即write回写一条消息到客户端.HTTP协议也 ...

  4. Java多线程系列--“JUC集合”04之 ConcurrentHashMap

    概要 本章是JUC系列的ConcurrentHashMap篇.内容包括:ConcurrentHashMap介绍ConcurrentHashMap原理和数据结构ConcurrentHashMap函数列表 ...

  5. nodejs 调试 node-inspector包

    nodejs  调试调试比较麻烦,让习惯了用chrome浏览器调试的前端同学来说有点不适用  node-inspector这个包让我们可以在chrome上像调试前端代码一样来调试nodejs 1.全局 ...

  6. Spring MVC异常处理详解

    Spring MVC中异常处理的类体系结构 下图中,我画出了Spring MVC中,跟异常处理相关的主要类和接口. 在Spring MVC中,所有用于处理在请求映射和请求处理过程中抛出的异常的类,都要 ...

  7. Java之HashMap在多线程情况下导致死循环的问题

    PS:不得不说Java编程思想这本书是真心强大.. 学习内容: 1.HashMap<K,V>在多线程的情况下出现的死循环现象   当初学Java的时候只是知道HashMap<K,V& ...

  8. Windows Azure Cloud Service (39) 如何将现有Web应用迁移到Azure PaaS平台

    <Windows Azure Platform 系列文章目录> 本文将简单介绍,如何将企业内现有的ASP.NET应用程序迁移到Azure PaaS平台. 因为在迁移过程中,可能需要对现有的 ...

  9. java基础题目总结

    有些基础题目由于工作中用的比较少但却又是不可少的,这样回答起来就会反应慢,不确定,不准确,特此开了文章记录遇到的不确定或者回答比较拗口的问题. 1.servlet是单例的吗,是安全的吗,是多线程吗 s ...

  10. C#中enum类型

    最近碰到了枚举类型,就顺便整理下. 枚举的基类Enum,可以是除 Char 外的任何整型.不做显示声明的话,默认是整形(Int32). 声明一个Enum类型: /// <summary> ...