bootstrap字体图标的使用

1. 现在有很多的网站支持字体图标，我所知道的有，,，等等，可能还有其他我并不知道
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中都不需要，使用的时候使用标签加个类名为icon-globe就可以出现了*/

iconmoon 的使用

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

遇到的问题

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

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