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图标生成长阴影效果.
随机推荐
- Vee-validate学习
Vee-validate使用方法 首先引入 <script src="https://cdn.bootcss.com/vee-validate/2.0.9/vee-validate.j ...
- HyperLedger Fabric 1.4 架构（6.2）
6.2.1 架构演进 Fabric架构经历了0.6版本到1.0版本的演进,架构上进行了重大改进,从0.6版本的结构简单演进到可扩展.多通道的设计,在架构上有了质的飞跃:从1.0版本以后,架 ...
- 谈谈WPF中的CollectionView与CollectionViewSource (1)
原文:谈谈WPF中的CollectionView与CollectionViewSource (1) 谈谈WPF中的CollectionView与CollectionViewSource (1) ...
- springmvc+mybatis的两种配置和应用方式
一.不用写dao层实现的方式 1.导入依赖包,我的pom.xml文件配置如下: <project xmlns="http://maven.apache.org/POM/4.0.0&qu ...
- 用Kettle的一套流程完成对整个数据库迁移 费元星
原地址 :http://ainidehsj.iteye.com/blog/1735434 需求: 1.你是否遇到了需要将mysql数据库中的所有表与数据迁移到Oracle. 2.你是否还在使用kett ...
- gitk中文乱码问题处理
执行了 git config --global gui.encoding utf- 查看 %USERPROFILE%\.gitconfig 文件中也有 [gui] encoding = utf-8 在 ...
- Pc移植到Mac的技术细节
1.样式不对: 2.布局不对: 3.Mac的菜单替换PC的菜单: Mac的菜单替换PC的菜单: 1)左上角图标没有手动添加且不需要添加的情况下出现,而且点击是Help菜单内容: 2)把HelpBtn和 ...
- Android中StackOverflow的问题
最近出现了一个让人抓狂的问题. 现在的项目中,制作了一个界面非常复杂.Fragment中嵌套下拉刷新的Listview 这样一个布局,在3.0以上的手机上都表现良好问题!但是在2.x的比较弱爆的手机上 ...
- ES6 语法糖
重新认识ES6中的语法糖:https://segmentfault.com/a/1190000010159725
- linux备忘录-系统服务daemon
服务(daemon)及其分类 Linux中的服务被称为daemon(daemon是守护神,恶鬼的意思哦).这些daemon会常驻在内存当中,从而对我们的系统和任务等进行一些辅助性的工作.实际上,dae ...