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图标生成长阴影效果.
随机推荐
- 洛谷P1090 合并果子
合并果子 题目链接 这个只能用于结构体中 struct item { int val; friend bool operator < (item a,item b) { return a.val ...
- Apache 配置说明
ServerRoot ServerRoot: The top of the directory tree under which the server's configuration, error, ...
- 《Cracking the Coding Interview》读书笔记
<Cracking the Coding Interview>是适合硅谷技术面试的一本面试指南,因为题目分类清晰,风格比较靠谱,所以广受推崇. 以下是我的读书笔记,基本都是每章的课后习题解 ...
- 「暑期训练」「Brute Force」 Far Relative’s Problem （CFR343D2B）
题意 之后补 分析 我哭了,强行增加自己的思考复杂度...明明一道尬写的题- -(往区间贪心方向想了 其实完全没必要,注意到只有366天,直接穷举判断即可. 代码 #include <bits/ ...
- 06-Mysql数据库----表的操作
06-表的操作 本节掌握 存储引擎介绍(了解) 表的增删改查 一.存储引擎(了解) 前几节我们知道mysql中建立的库===>文件夹,库中的表====>文件 现实生活中我们用来存储数据 ...
- %matplotlib inline
整理摘自 https://zhidao.baidu.com/question/1387744870700677180.html %matplotlib inline是jupyter notebook里 ...
- Python 3 学习笔记之——错误和异常
1. 语法错误 Python 的语法错误被称为解析错,语法分析器会指出出错的代码行,并且在最先找到的错误的位置标记一个小小的箭头. >>> while True File " ...
- [转]Hexo博客添加访问统计 - 记录
引入不蒜子 <script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"> ...
- MySql数据库插入或更新报错：Cannot add or update a child row: a foreign key constraint fails
具体报错信息: Cannot add or update a child row: a foreign key constraint fails (`xxx`.`AAA`, CONSTRAINT `t ...
- PAT L2-019 悄悄关注
https://pintia.cn/problem-sets/994805046380707840/problems/994805059731177472 新浪微博上有个“悄悄关注”,一个用户悄悄关注 ...