CSS 字体图标

传统图片

  • 加载一次图片就要增加一次HTTP请求
  • 不适应多屏

雪碧图

  • 减少了HTTP请求
  • 加大了CSS 编码和维护难度

字体图标

  • 放大不失真
  • 可定制
  • 本质是字体 可以设置 大小 颜色 和 阴影
  • 多色支持不足

字体图标三种引用方式

  • unicode（最原始、兼容性最好Ie6+、不支持多色。）
  • font-class（unicode方式的变种，书写更直观，主要是解决unicode书写不直观，语意不明确的问题、兼容性良好Ie8+，不支持多色。）
  • symbol（兼容性较差，支持 ie9+及现代浏览器、支持多色图标）
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容