网上有很多高质量的图标，基于icon的关键词能在Google上搜索到不少内容，不考虑版权外还要修改大小、颜色等等，现在介绍一些替代方案：Unicode、CSS 和 Font，它具有更高的灵活性。
方案一：Font Awesome奥森图标
一套绝佳的图标字体库和CSS框架（奥森图标），可以通过http://code.z01.com/Boot/font.html 获取，共675个图标，可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。
使用Font Awesome图标最大的好处是兼容性高，ie8下完整浏览不是问题。
方案二：Unicode（维基百科）
维基百科中：
Unicode（中文：万国码、国际码、统一码、单一码）是计算机科学领域里的一项业界标准。它对世界上大部分的文字系统进行了整理、编码，使得电脑可以用更为简单的方式来呈现和处理文字。
Unicode以16进制表示，例如一些图标可以表示为（一些平台会自动转换成emoji，如iOS）：
相比Unicode，好处在于更小的体积，以及能够快速更改颜色等。
更多请至：http://jrgraphix.net/r/Unicode/2600-26FF
方案三：CSS
上图中内容均为css实现，可能你觉得这些很简单，甚至有些粗糙，但他在当今HTML5+CSS3的配合下能完成不少有意思的互动，由于设备迭代速度很快，近年来也再也没有IE6的迷之Bug的困扰了。
方案四：Font字体
用图标字体来代替图标是当下最流行且优雅的解决方案，它能如普通字体一样指定各种属性，主要有两种字体：Awesome和Material icons，这两者均为Web字体，需要在CSS中使用@font-face加载，二者的用法上都差不多，一下以Google的font Material icons 来示例。
Web字体的加载
Google这个 Material icons 字体有个对应的API，很方便
复制<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
但是由于你懂的原因不太好用，字体也可下载到本地加载：
复制@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'), url(https://example.com/MaterialIcons-Regular.woff) format('woff'), url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');}
可以为字体指定初始样式（非必要）：
复制.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';}
如果有了上面的字体样式初始化，就可以直接使用material-icons类来调用图标:
复制<i class="material-icons">face</i>
也可以直接指定内容 font-family: 'Material Icons'来调用，例如：
复制#main .reply a:before {
font-family: 'Material Icons';
content: "reply";
padding-right: .3em;
display: inline-block;
vertical-align: text-bottom;
font-size: 1.25em;}
更多请至:Awesome Material icons
方案五：zFont图标集
这是由业界领先的Zoomla!逐浪CMS团队黄页的图标，目前共214个，解决了诸如svg矢量不兼容的问题，并与asesome奥森图标完整兼容，并在http://code.z01.com 平台进行全面开放。
另外一个好处就是速度快，比国外cdn访问支持更好，同步支持http://和https://（就是兼容SSL访问引用啦：）
使用此图集方法有二：一是基于在http://code.z01.com 平台直接获取，简而言之就是调用：
@import url("https://code.z01.com/Zfont.css");
通过引用上面一行，可以直接调用“逐浪云”高端webfont字体库，或访问www.ziti163.com/webfont获取自定义字体。
方法二是下载免费强大能够建设网站、OA、电商和移动平台的Zoomla!逐浪CMS，内部会直接集成，如下图标：
