字体图标iconfont的学习与使用

字体图标

展示的是图标，本质是属于字体

字体图标的优点

轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少服务器的请求
灵活性：本质其实是文字，可以很随意的改变颜色，产生阴影，透明效果，旋转等
兼容性：几乎支持所有的浏览器
注:字体图标不能替代精灵技术，只是对工作中的图标部分技术的提升和优化
结构复杂的还是需要使用精灵技术

icomoon字体图标的使用方法

1.字体图标的下载

推荐下载：
icomoon字库 http://icomoon.io
阿里iconfont字库 http://www.iconfont.cn/

打开网址http://icomoon.io

可以选择需要的图标，如果没有可以点击左下的Add icons From Library… 添加更多，点击add添加

如果想要调整图标大小，方向，点击Edit

如果想要将图标下载下来，选好后点击

再点击Download

2.字体图标的追加

如果想要添加新的图标，把下载的压缩包里面的selection.json从新上传，然后选中自己想要新的图标，从新下载压缩包，并替换原来的文件即可

3.字体图标的引入

1.把下载包里面的fonts文件夹放入页面根目录下

2.把字体文件通过css引入到我们的页面中


引入后找到之前的文件夹，点开demo.html

复制粘贴到到标签中