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图标生成长阴影效果.
随机推荐
- P1078 文化之旅
P1078 文化之旅 题目描述 有一位使者要游历各国,他每到一个国家,都能学到一种文化,但他不愿意学习任何一 种文化超过一次(即如果他学习了某种文化,则他就不能到达其他有这种文化的国家).不 同的国家 ...
- Bootstrap开发漂亮的前端界面之实现原理
引:Bootstrap采用的是一个“响应式”设计.响应式Web 设计是一个让用户通过各种尺寸的设备浏览网站获得良好的视觉效果的方法.例如,您先在计算机显示器上浏览一个网站,然后再智能手机上浏览,智能手 ...
- Android ImageSwitcher 配合Picasso解决内存溢出（OOM）问题
最近项目中用到了 ImageSwitcher 来实现图片切换,使用起来很简单,但发现当图片比较大(超过了3M)时,程序出现了内存溢出(OOM)问题而崩溃了. 原因就是图片太大了,显示到 ImageVi ...
- Qt HUD（平显）演示程序绿色版
把一个黑底白字的程序改成黑底绿字 上对比图,左侧是原本,右侧是仿造,有些地方比例还是有问题 其实这个程序没有啥技术含量,就是画 #include "mainwindow.h" #i ...
- Qt 蓝牙部分翻译
这是我第一次尝试翻译技术文档,自己英语太烂,一直不敢尝试,感谢生活,让我勇敢迈出这第一步. 大部分都是直译,如有不妥,还请制导. Qt Bluetooth The Bluetooth API prov ...
- Linux-获得命令帮助man
date:显示当前系统时间,修改时间 clock,hwclock:显示硬件时间 cal:calendar,查看日历 计时器靠晶体振荡器来完成计时 Linux: 实时时钟,rtc,real time c ...
- python 基础篇 15 内置函数和匿名函数
------------------------>>>>>>>>>>>>>>>内置函数<<< ...
- [leetcode-609-Find Duplicate File in System]
https://discuss.leetcode.com/topic/91430/c-clean-solution-answers-to-follow-upGiven a list of direct ...
- Python之tornado框架原理
Python web框架 1.简单概念 tornado socket.逻辑处理 Django flask 逻辑处理 第三方处理模块(包含了socket) jinja2模块 Models 数据库处理 V ...
- Ext.Net学习网站
1.http://ext.net/ 官网.里面的examples是宝贝. 2.http://www.qeefee.com/zt-extnet 起飞网