ICON小图标

ICON

• CSS Sprite
  
  • background-image,background-position（注意坐标，索引值重0开始）
  • 特点：
    
    • 相对单个小图标，它节省文件和服务器请求的次数
    • 一般情况下，需要保存为PNG-24的文件格式
    • 可以设计出丰富多彩的颜色图标
  • 难点：
    
    • 注意每个小图标的大小
    • 小图标之间的距离

• font+html

  • 灵活性：轻松地改变图标的颜色和其他的CSS效果
  • 扩展性：改变图标的大小
  • 矢量性：缩放图标不会影响清晰度
  • 兼容性：字体图标支持所有现在浏览器
  • 本地使用：在不同的设计和编辑使用

  • 自己编辑图标：（http://flowerboys.cn/font）

    • EOT:微软开发，IE专用
    • WOFF：被W3C推荐
    • TTF:Mac OS，WIN最常见一种字体

    • SVG：W3C开放标准的图形格式

        @font-face{
      font-family: "imooc-icon";
      src: url("../fonts/icomoon.eot"); /* IE9 兼容模式 */
      src: url("../fonts/icomoon.eot?#iefix") format("embedded-opentype")
           ,url("../fonts/icomoon.woff") format("woff")
           ,url("../fonts/icomoon.ttf") format("truetype")
           ,url("../fonts/icomoon.svg") format("svg");
      font-weight: normal;
      font-style: normal;
          }

• font+css

      .icon-spinner:before {
          content: "\e600";
      }  实心
      .icon-heart:after {
          content: "\e602";
      }  空心
  

• 对比：

  CSS Sprite	font+html	font+css
  原理	背景图片定位	@font-face
  兼容性	完美	完美
  颜色	丰富	单一
  缩放	失真	高清
  维护	困难	简单