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

最新推荐文章于 2023-02-10 12:31:29 发布

weixin_30565199

最新推荐文章于 2023-02-10 12:31:29 发布

阅读量241

点赞数

原文链接：http://www.cnblogs.com/ytg-share/p/5439346.html

版权

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