东拼西凑完成一个后台 ”前端框架“ (2) - 字体图标

　　还记得之前开发的项目目录下都会存放一大堆图标文件，难以维护，同时图标和字体的对齐也是一个麻烦事儿；下面简单列出字体图标的优劣势[摘自：http://www.javashuo.com/article/p-yvrehelt-ch.html]：

 

　图标字体的优点和劣势

　　优点

• 轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会立刻渲染出来，不须要下载一个个图像。这样能够减小HTTP的请求数量，并且和HTML5的离线存储配合，能够对性能作出优化。
• 灵活性：不调字体能够像页面中的文字同样，经过font-size属性来对其进行大小的设置，并且还能够添加各类文字效果，如color、hover、filter、text-shadow、transform等效果。灵活的简直不像话！
• 兼容性：图标字体支持现代浏览器，甚至是低版本的IE浏览器，因此能够放心的使用它。

相比于位图放大图片会出现失真、缩小又会浪费掉像素点，图标字体不会出现这种状况。

　　劣势

• 图标字体只能被渲染成单色，或者是CSS3的渐变色
• 版权上也有着对应的限制，固然仍是有不少免费的图标字体能够供咱们下载。
• 当本身创做图标字体的时候，是比较耗费时间的，重构人员的后期维护成本也比较高

 

　　目前用的比较多的图标库就是 font-awesome，如何使用这里就不赘述了；

　　假如你想本身去制做或者寻找图标的话，强烈建议 iconfont ;

　　这里是帮助文档：https://www.iconfont.cn/help/detail

 

　　转载请注明出处：http://www.javashuo.com/article/p-opkukbzb-cy.html