CSS代码：
.ico-a { color: #333; }
.ico-a:hover { color: #4D77C6; text-decoration: none; }
.ico { display: inline-block; width: 20px; height: 20px; background: url(css3-icons.png) no-repeat -99em; vertical-align: -3px; }
/* 以下为IE9+浏览器 */
:root .ico { background-image: none; position: relative; }
.ico::before, .ico::after, .ico > z, .ico > z::before, .ico > z::after { content: ''; position: absolute; }
/* 以下出现background-position的都是兼容IE7-IE8浏览器的 */
.ico-list { background-position: 0 0; }
a:hover .ico-list, a.ico-list:hover { background-position: -20px 0; }
/* css3 */
.ico-list::before { width: 2px; height: 2px; padding: 3px 0; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; top: 6px; left: 2px; background-color: currentColor; background-clip: content-box; }
.ico-list::after { width: 11px; height: 1px; padding: 4px 0; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; background-color: currentColor; top: 7px; left: 6px; background-clip: content-box; }
.ico-repeat { background-position: 0 -20px; }
a:hover .ico-repeat, a.ico-repeat:hover { background-position: -20px -20px; }
/* css3 */
.ico-repeat::before { width: 3px; height: 3px; background-color: currentColor; box-shadow: 0 5px currentColor, 5px 0 currentColor, 5px 5px currentColor, 10px 0 currentColor, 0 10px currentColor, 5px 10px currentColor, 10px 5px currentColor, 10px 10px currentColor; top: 5px; left: 3px; }
.ico-open { background-position: 0 -40px; }
a:hover .ico-open, a.ico-open:hover { background-position: -20px -40px; }
/* css3 */
.ico-open::before { width: 5px; height: 10px; border-top: 1px solid currentColor; border-left: 1px solid currentColor; left: 2px; top: 3px; }
.ico-open::after { width: 7px; height: 1px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; top: 4px; left: 7px; }
.ico-open z { width: 12px; height: 8px; border: 1px solid currentColor; left: 4px; top: 6px; }
.ico-copy { background-position: 0 -60px; }
a:hover .ico-copy, a.ico-copy:hover { background-position: -20px -60px; }
/* css3 */
.ico-copy::before, .ico-copy::after { width: 9px; height: 11px; }
.ico-copy::before { top: 4px; left: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; }
.ico-copy::after { top: 7px; left: 3px; border: 1px solid currentColor; }
.ico-copy z::before { width: 1px; height: 0; border-top: 3px solid currentColor; top: 4px; left: 6px; }
.ico-copy z::after { width: 0; height: 1px; border-right: 3px solid currentColor; top: 16px; left: 14px; }
.ico-note { background-position: 0 -80px; }
a:hover .ico-note, a.ico-note:hover { background-position: -20px -80px; }
/* css3 */
.ico-note::before { width: 14px; height: 14px; border: 1px solid currentColor; border-radius: 14px; left: 3px; top: 5px; }
.ico-note::after { width: 2px; height: 1px; border-top: 2px solid currentColor; border-bottom: 5px solid currentColor; left: 10px; top: 9px; }
.ico-download { background-position: 0 -100px; }
a:hover .ico-download, a.ico-download:hover { background-position: -20px -100px; }
/* css3 */
.ico-download::before { width: 5px; height: 1px; border-left: 5px solid currentColor; border-right: 5px solid currentColor; top: 9px; left: 2px; }
.ico-download::after { width: 13px; height: 8px; border: 1px solid currentColor; border-top: 0; top: 10px; left: 2px; }
.ico-download z::before { width: 0; height: 12px; border-left: 1px solid currentColor; left: 9px; top: 3px; }
.ico-download z::after { width: 1px; height: 0; border: 3px solid transparent!important; border-top-color: currentColor!important; top: 13px; left: 6px; }
.ico-share { background-position: 0 -120px; }
a:hover .ico-share, a.ico-share:hover { background-position: -20px -120px; }
/* css3 */
.ico-share::before, .ico-share::after { border-top: 1px solid currentColor; left: 7px; }
.ico-share::before { width: 6px; -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg); top: 15px; }
.ico-share::after { width: 7px; -webkit-transform: rotate(-30deg); -ms-transform: rotate(-30deg); transform: rotate(-30deg); top: 8px; }
.ico-share z, .ico-share z::before, .ico-share z::after { border: 1px solid currentColor; border-radius: 3px; }
.ico-share z { width: 4px; height: 4px; left: 2px; top: 9px; }
.ico-share z::before, .ico-share z::after { width: 3px; height: 3px; }
.ico-share z::before { top: -6px; left: 10px; }
.ico-share z::after { top: 5px; left: 9px; }
.ico-comment { background-position: 0 -140px; }
a:hover .ico-comment, a.ico-comment:hover { background-position: -20px -140px; }
/* css3 */
.ico-comment::before { width: 5px; height: 8px; border: 1px solid currentColor; border-right: 0; border-top-left-radius: 2px; border-bottom-left-radius: 2px; left: 4px; top: 5px; }
.ico-comment::after { width: 3px; height: 8px; border: 1px solid currentColor; border-left: 0; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 1px; top: 5px; left: 13px; }
.ico-comment z::before { width: 3px; border-top: 1px solid currentColor; top: 5px; left: 10px; }
.ico-comment z::after { width: 3px; height: 3px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; border-bottom-right-radius: 1px; border-bottom-right-radius: 1px; -webkit-transform: skewY(45deg); -ms-transform: skewY(45deg); transform: skewY(45deg); left: 10px; top: 13px; }
.ico-send { background-position: 0 -160px; }
a:hover .ico-send, a.ico-send:hover { background-position: -20px -160px; }
/* css3 */
.ico-send::before { width: 12px; height: 8px; border: solid currentColor; border-width: 0 1px 1px; top: 11px; left: 3px; }
.ico-send::after { width: 6px; height: 1px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; top: 10px; left: 3px; }
.ico-send z::before { width: 5px; height: 10px; border-top: 1px solid currentColor; border-left: 1px solid currentColor; border-top-left-radius: 5px 10px; border-bottom-left-radius: 5px 0; left: 9px; top: 5px; }
.ico-send z::after { width: 4px; height: 4px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; top: 4px; left: 10px; }
.ico-cordown { background-position: 0 -180px; }
a:hover .ico-cordown, a.ico-cordown:hover { background-position: -20px -180px; }
/* css3 */
.ico-cordown::before { height: 2px; width: 0; border-left: 1px solid currentColor; box-shadow: 1px -1px currentColor, 2px -2px currentColor, 3px -3px currentColor, -1px -1px currentColor, -2px -2px currentColor, -3px -3px currentColor; top: 13px; left: 9px; }
HTML代码：
<a href="javascript:" class="btn btn-blue">点击我所有小图标2倍放大</a>
<div class="mt20"><strong>点线攻略</strong></div>
<p><a href="javascript:" class="ico-a"><i class="ico ico-list"></i>列表</a></p>
<p><a href="javascript:" class="ico-a"><i class="ico ico-repeat"></i>平铺</a></p>
<div class="mt20"><strong>矩形攻略</strong></div>
<p><a href="javascript:" class="ico-a"><i class="ico ico-open"><z></i>打开文件夹</a></p>
<p><a href="javascript:" class="ico-a"><i class="ico ico-copy"><z></i>复制该文件</a></p>
<div class="mt20"><strong>圆形攻略</strong></div>
<p>注意事项 <a href="javascript:" class="ico ico-note ico-a"></a></p>
<div class="mt20"><strong>三角攻略</strong></div>
<p><a href="javascript:" class="ico-a"><i class="ico ico-download"><z></i>下载该文件</a></p>
<div class="mt20"><strong>旋转攻略</strong></div>
<p><a href="javascript:" class="ico-a"><i class="ico ico-share"><z></i>分享该文件</a></p>
<div class="mt20"><strong>拉伸攻略</strong></div>
<p><a href="javascript:" class="ico-a"><i class="ico ico-comment"><z></i>发表评论</a></p>
<div class="mt20"><strong>弧线攻略</strong></div>
<p><a href="javascript:" class="ico-a"><i class="ico ico-send"><z></i>发送该文件</a></p>
<div class="mt20"><strong>万能攻略</strong></div>
<p><a href="javascript:" class="ico-a">更多操作<i class="ico ico-cordown"></i></a></p>
