字体图标的使用和追加

字体图标
背景：
图片有优点，但是缺点也很明显，比如图片不但增加总文件的大小，还增加许多额外的http请求，都会降低网页性能，且不能很好的进行缩放，因为缩放会失真，字体图标就出现了

优点：
可以做出跟图片一样可以做的事情，本质是文字，随意改变颜色，产生阴影，透明度等等，几乎所有浏览器都支持

如何下载这些字体图标呢？
网站：http://icomoon.io
http://www.iconfont.cn(以此为例）

1、选择相关字体图标，并下载，会得到一个icomoon的压缩包，然后解压缩，重点是里面的fonts 文件

2、把fonts文件复制到根目录下
3、html标签内里面添加结构，然后打开icomoon文件夹里demo.html文件，复制想要的图标后，粘贴到html标签内

4、在样式里面声明字体：告诉被人我们自己定义的字体（一定要注意字体路径的问题）（style.css记事本里面有这段代码，不需要记忆）
@font-face {
font-family: ‘icomoon’;
src: url(‘fonts/icomoon.eot?b7y3za’);
src: url(‘fonts/icomoon.eot?b7y3za#iefix’) format(‘embedded-opentype’),
url(‘fonts/icomoon.ttf?b7y3za’) format(‘truetype’),
url(‘fonts/icomoon.woff?b7y3za’) format(‘woff’),
url(‘fonts/icomoon.svg?b7y3za#icomoon’) format(‘svg’);
font-weight: normal;
font-style: normal;
font-display: block;
}


如何追加字体图标呢？
步骤：1、打开http://www.iconfont.cn
2、点击import icons(导入图标）点击后选择icomoon里面的selection.json文件，下载想要的图标后下载压缩包替换掉原来的即可。