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图标生成长阴影效果.
随机推荐
- HDU1301 Jungle Roads(Kruskal)
Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submission( ...
- 48-Identity MVC：Model前后端验证
1-创建RegisterViewModel类 namespace MvcCookieAuthSample.ViewModel { public class RegisterViewModel { [R ...
- Django学习之天气调查实例（2）：显示数据表数据
数据表数据添加后,如添加3条用户信息,分别为“aaa”.“bbb”.“ccc”,现在通过代码的方式显示数据表中的数据. 1.在website项目文件夹中创建 userload.py文件,并且写如下代码 ...
- YAGNI 声明
1.YAGNI介绍 YAGNI 全名是 You aren't Going to Need It,在你设计草案的初稿中,应该努力使用最简单可以工作的事物,直至程序的某个方面要求你添加额外的特性. 2.思 ...
- 「日常训练」 神、上帝以及老天爷 （HDU 2048）
题意 数论中的错排问题.记错排为Dn" role="presentation">DnDn,求Dnn!" role="presentation&q ...
- 「Haskell 学习」一 环境与大致了解
感谢<Real World Haskell>在网上的免费发布,可以白嫖学Haskell这个久闻大名的函数式编程语言了. 本文运行于openSUSE Tumbleweed下,运行相关命令时留 ...
- Linux系统安装jdk后出现无法执行binary 文件的错误解决
这是由于jdk版本的问题,针对Linux系统,Oracle提供了 ARM 的32jdk和64位jdk , 但是也提供了类似这样jdk-8u191-linux-i586.tar.gz32或64位的jdk ...
- pyinstaller加密打包
pyinstaller -F -w --key=keys --clean --icon=imgs/xxx.ico xxx.py
- cocos2d-x环境搭建 摘自百度文库
cocos2d-x环境搭建 引言:笔者在网上寻觅了很多资料,最终发现了这份实际可用的文档,供大家参考.源地址:http://wenku.baidu.com/view/93f7b0f1102de2bd9 ...
- C#-WinForm控制输入框只接受数字输入
背景 给导师上一节c#编写数据库应用程序的课,模拟ATM自助取款机的功能写了个winForm程序,关于金额的输入肯定是数字,因此避免输入格式不正确的数字带来异常,直接在输入时进行校验. 封装函数 C# ...