bootstrap字体图标在谷歌显示正常,在火狐显示异常的问题

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文件夹放到同级目录,这样就可以搞定了,同时需要注意的是在线上的时候不需要放到同级目录也可以实现,这个可能和火狐的一些内部跨域机制有关系,没有再深入的研究,所以我不瞎说了,哈哈

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

posted @ 2016-04-27 16:23 叫我MrGuang 阅读(...) 评论(...) 编辑 收藏