页面中图标的使用

精灵图（CSS sprite）
所谓精灵图，其实就是把几张图拼成一张图。从而在低并发的浏览器上达到快速传输并呈现内容的目的（减少请求）。

• 在用到这些图片的时候，需要引用整张图片然后设定坐标到需要的那张小图上。
• 还有就是：图片根据颜色分组，分成多个文件。每张图只有一种颜色，这样让每张图片变得更小。
• 当然，这根据当前项目来选择适于你的方案。主要根据下面两个属性来处理精灵图：

1 background-image: url(".../*.png");2 background-position: 0px 0px;3 4 /* 注意：position的负值情况。 */

先上几个图标网站，因为下面要介绍字体图标了：

• > [fortawesome.github.io]
• > [icomoon.io]
• > [阿里图标库]
• > [Font Awesome 3.0]

字体图标在html中的使用

1 <li><a href=""><i class="i-icon">﨡i>a>li>2 

 1  @font-face{ 2       font-family: "my-icon" 3       src: url("../*.eot"); 4            /* ie低版本浏览器需要加'?' 否则可能回报404错误 */  5       src: url("../ *.eot?") format("embedded-opentype") 6            ,url("../ *.woff") format("woff") 7            ,url("../ *.ttf") format("truetype") 8            ,url("../ *.svg") format("svg"); 9            font-weight: normal;10            font-style: normal;11  }12  .i-icon{13         font-family: "my-icon";14         font-style: normal;15         font-weight: normal;16         font-size: 26px;17         -webkit-font-smoothing: antialiased; /*消除锯齿*/18         -moz-osx-font-smoothing: grayscale; /*消除锯齿*/19  }

字体图标在css中的使用

1 <li><i class="icon icon-magic">i>li>2 

@font-face {    font-family: "myfont";    src: url("../ *.eot");    src: url("../ *.eot?#iefix") format("embedded-opentype"),          url("../ *.woff") format("woff"),          url("../ *.ttf") format("truetype"),          url("../ *.svg") format("svg");    font-weight: normal;    font-style: normal;  }  .icon {    font-family: "myfont";    font-weight: normal;    font-style: normal;    -webkit-font-smoothing: antialiased;    -moz-osx-font-smoothing: grayscale;  }  .icon-magic:before {    content: "/c210";  }

各种方式对比