首页 > 代码库 > iebackground+icon图标兼容

iebackground+icon图标兼容

2024-10-16 00:06:39   228人阅读

<!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=http://www.mamicode.com/‘img/wap-qq.png‘,  sizingMethod=‘scale‘);
  }
  .bg-ul .wechat a{
    background-image:url(img/wap-wechat.png);
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://www.mamicode.com/‘img/wap-wechat.png‘,  sizingMethod=‘scale‘);
  }
  .bg-ul .minblog a{
    background-image:url(img/wap-weibo.png);
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://www.mamicode.com/‘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">&#xe6f8;</i>
    </a>
  </li>
  <li>
    <a href="javascript:;">
      <i class="iconfont">&#xe60e;</i>
    </a>
  </li>
  <li>
    <a href="javascript:;">
      <i class="iconfont">&#xe629;</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">&#xe6f8;</i>
    </a>
  </li>
  <li>
    <a href="javascript:;">
      <i class="iconfont wechat">&#xe60e;</i>
    </a>
  </li>
  <li>
    <a href="javascript:;">
      <i class="iconfont minblog">&#xe629;</i>
    </a>
  </li>
</ul>
<script type="text/javascript" src="iconfont/iconfont.js"></script>
</body>
</html>

 http://files.cnblogs.com/files/theWayToAce/iconfont-bg.rar

iebackground+icon图标兼容


联系
我们