css绘制图标

使用css绘制图标的优点

1. css绘制图标体积更小，本质上只是文本
2. 有效减少http请求，css绘制的图标直接嵌入在HTML中，不需要额外的在向服务器请求
3. 方便维护和更新，修改css属性即可全局性的修改样式
4. 可以使用em，rem，百分比，响应式设计更方便。直接使用psd切图，如有移动端需求还需要使用媒体查询去修改移动端图片的大小
5. css绘制图标基于矢量图形原理，无限缩放不失真

缺点

使用css绘制图标缺点也很明显，有些图标css绘制不出来。或者说使用css绘制过于复杂，代码也会显得冗余。并且也需要考虑到一些浏览器兼容性的问题。

开整

绘制一个简单的图标

绘制箭头

标题前小图标

绘制月亮

绘制云彩

绘制心形

end

第一次发帖子，需要改进的地方还有很多。如有误或者浏览体验不佳的地方，欢迎大佬指正。