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