iebackground+icon图标兼容
<!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
iebackground+icon图标兼容的更多相关文章
- 用字体在网页中画Icon图标
第一步,下载.IcoMoon网站选择字体图标并下载,解压后将fonts文件夹放在工程目录下.fonts文件夹内有四种格式的字体文件: 注:由于浏览器对每种字体的支持程度不一致,要想在所有浏览器中都显示 ...
- 在网页中制作icon图标
用字体在网页中画icon图标 第一步:获取字体资源IconMoon网站https://icomoon.io iconMoon中有很多免费小图标可用,还能设置下载图标的使用属性(通过网站中设立的按钮pr ...
- 在项目中增加自定义icon图标
以MUI框架为例,内容来自于MUI官网. mui如何增加自定义icon图标 mui框架遵循极简原则,在icon图标集上也是如此,mui仅集成了原生系统中最常用的图标:其次,mui中的图标并不是图片,而 ...
- JS组件系列——不容错过的两款Bootstrap Icon图标选择组件
前言:最近好多朋友在群里面聊到bootstrap icon图标的问题,比如最常见的菜单管理,每个菜单肯定需要一个对应的菜单图标,要是有一个可视化的图标选择组件就好了,最好是直接选择图标,就能得到对应的 ...
- 字体在网页中画ICON图标
用字体在网页中画ICON图标有三种小技巧: 1.用CSS Sprite在网页中画小图标 实现方法: 首先将小图片整合到一张大的图片上 然后根据具体图标在大图上的位置,给背景定位.background- ...
- Ext.Net TreePanel 修改Icon图标
分类: Ext.Net2012-09-24 13:44 1779人阅读 评论(0) 收藏 举报 webformserverextassemblyxhtmlobject 1.默认icon 2.自定义ic ...
- QT5.5.0版本添加icon图标步骤
1.制作icon图标文件 可以进入这个网站在线制作:http://www.ico.la/ 2.创建资源文件:qrc文件 接着 添加2两项,先点击prefix,然后添加文件--->图标路径 3.可 ...
- 启动页面设置，icon图标设置
更多尺寸像素如何放置请看:http://chicun.jammy.cc/ 如何设置App的启动图,也就是Launch Image? 新建一个iosLaunchImage文件夹
- Flatty Shadow在线为Icon图标生成长阴影效果。
Flatty Shadow在线为Icon图标生成长阴影效果. Flatty Shadow 彩蛋爆料直击现场 Flatty Shadow在线为Icon图标生成长阴影效果.
随机推荐
- [Cracking the Coding Interview] 4.2 Minimal Tree 最小树
Given a sorted(increasing order) array with unique integer elements, write an algorithm to create a ...
- hoj第三场G-manhattanp ositioning system
---恢复内容开始--- 一.题意 在二维坐标系内,给定若干个点和目标点距离该点的曼哈顿距离,求是否存在唯一解使得目标点坐标为整数. 二.题解 重新思考题目模型,考虑曼哈顿距离一定时,几何含义为,以给 ...
- 关于 js 对象 转 字符串 和 深拷贝 的探讨
随着更多语言的支持 **json** 作为数据传输和存储的媒体,已经非常成熟且应用广泛.却存在致命硬伤,不携带 **对象方法** .在数据传输和存储中,这是恰当的和合理的. 但是在更多的应用场景中,又 ...
- 使用maven插件生成grpc所需要的Java代码
1.首先需要编写自己需要的.proto文件,本文重点不在这里,.proto可以参考grpc官方例子 https://grpc.io/docs/quickstart/java.html 2.创建自己的J ...
- HBase全网最佳学习资料汇总
HBase全网最佳学习资料汇总 摘要: HBase这几年在国内使用的越来越广泛,在一定规模的企业中几乎是必备存储引擎,互联网企业阿里巴巴.百度.腾讯.京东.小米都有数千台的HBase集群,中国电信的话 ...
- C# 获取当前日期当年的周数
这几天跨年,项目上遇到了一个周数计算的问题. 2016年的元旦是周五开始的,之前系统计算的是属于15年的第53个周,但是年份已经到了16年了. 公司要求从1月1号周五开始算作16年的第一个周,今天1月 ...
- Django 运行Admin 页面时出现 UnicodeDecodeError: 'gbk' codec can't decode byte XXXX解决方法
具体报错信息 Traceback (most recent call last): File "D:\Anaconda3\lib\site-packages\django\core\hand ...
- gitbook.explore更新升级了, 不能再搜索了
www.gitbook.com/explore 不再是一个索引页面 Can I browse existing projects on GitBook ? The new version of Git ...
- 小程序开发时PC端调试返回结果和手机端IOS不一致问题
IOS11登录时遇到一个请求与PC返回不一致情况, 在小程序调试时IOS上始终没有wx.request() 不能发送请求 尝试解决方法 打开微信小程序调试的设置, 将TLS设为可信任的域名 设置 -- ...
- 【集训试题】exam 信心考 最小割
题意概述: 有N个人,A,B两个考场.如果学生i在A考场,总信心值增加xi:如果学生i在B考场,总信心值增加yi.其中还有m对好友,当第i对好友的两个人都在A考场时,总信心值增加ai:如果两人都在B考 ...