<!DOCTYPE > <html> <head> <title>zepto</title> <meta name="name" content="content"> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="stylesheet" type="text/css" href="iconfont/iconfont.css"> <style type="text/css"> .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } .fl{ float: left; } .fr{ float: right; } .clearfix { zoom: 1; } .clearfix:after { content: ""; clear: both; display: block; } ul,li{ list-style: none outside; } a{ text-decoration: none; } .bg-ul li{ margin-left: 20px; width: 34px; height: 34px; float: left; } ul li a{ display: inline-block; width: 34px; height: 34px; background-size: cover; background-repeat: no-repeat; background-position: -50% -50%; } ul li{ float: left; width: 50px; height: 50px; } ul li .icon{ font-size: 2em; } .bg-ul .qq a{ background-image:url(img/wap-qq.png); filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/wap-qq.png', sizingMethod='scale'); } .bg-ul .wechat a{ background-image:url(img/wap-wechat.png); filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/wap-wechat.png', sizingMethod='scale'); } .bg-ul .minblog a{ background-image:url(img/wap-weibo.png); filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/wap-weibo.png', sizingMethod='scale'); } .iconfont-ul a .iconfont{ font-size: 2em; color: #bcbcbc; } .iconfont-self-ul a .qq{ color: rgb(77,175,234); } .iconfont-self-ul a .wechat{ color: rgb(62,177,53); } .iconfont-self-ul a .minblog{ color: rgb(240,0,0); } </style> <body> <h2>添加背景图片</h2> <ul class="bg-ul clearfix"> <li class="qq"><a href="javascript:;"></a></li> <li class="wechat"><a href="javascript:;"></a></li> <li class="minblog"><a href="javascript:;"></a></li> </ul> <h2>icon彩色图标</h2> <p>svg use方法</p> <ul class="icon-ul clearfix"> <li> <a href="javascript:;"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-qq"></use> </svg> </a> </li> <li> <a href="javascript:;"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-wechat"></use> </svg> </a> </li> <li> <a href="javascript:;"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-minblog"></use> </svg> </a> </li> </ul> <h2>icon纯色图标</h2> <p>iconfont 方法</p> <ul class="iconfont-ul clearfix"> <li> <a href="javascript:;"> <i class="iconfont icon-qq"></i> </a> </li> <li> <a href="javascript:;"> <i class="iconfont icon-wechat"></i> </a> </li> <li> <a href="javascript:;"> <i class="iconfont icon-minblog"></i> </a> </li> </ul> <h2>icon纯色图标兼容ie6</h2> <p>& #xe6f8; 方法</p> <ul class="iconfont-ul clearfix"> <li> <a href="javascript:;"> <i class="iconfont"></i> </a> </li> <li> <a href="javascript:;"> <i class="iconfont"></i> </a> </li> <li> <a href="javascript:;"> <i class="iconfont"></i> </a> </li> </ul> <h2>icon纯色图标自定义样式兼容ie6</h2> <p>& #xe6f8; 方法</p> <ul class="iconfont-ul iconfont-self-ul clearfix"> <li> <a href="javascript:;"> <i class="iconfont qq"></i> </a> </li> <li> <a href="javascript:;"> <i class="iconfont wechat"></i> </a> </li> <li> <a href="javascript:;"> <i class="iconfont minblog"></i> </a> </li> </ul> <script type="text/javascript" src="iconfont/iconfont.js"></script> </body> </html>
http://files.cnblogs.com/files/theWayToAce/iconfont-bg.rar