码迷,mamicode.com
首页 > 其他好文 > 详细

iconfont

时间:2016-06-20 18:39:18      阅读:4728      评论:0      收藏:0      [点我收藏+]

标签:

iconfont对于前端应用来说有很多便捷:

1、自由变化大小

2、自由修改颜色

3、可以添加一些视觉效果如:阴影、旋转、透明度。

4、兼容IE6

在线引用和下载到本地两种方法

一。在线引用

图标的制作和上传可以参照官网给出的文档:Page 1
图标的下载和使用官网上说的不是很清楚,简单介绍下:
1.首先在Iconfont-阿里巴巴矢量图标库上面将你需要的图标点击购物车按钮加入“暂存架”

技术分享2.选择完所有要用的图标后“存储为项目”,给它命名。然后在“图标管理”-“图标应用项目”中找到这个项目,获取在线链接,把里面的代码复制到CSS中。
技术分享3.在HTML中需要使用到图标时,使用iconfont类名。
<i class="iconfont">&#xe600;</i>
里面写上你想用的图标下面的Unicode:
技术分享
4.然后你可以通过控制iconfont类的属性改变图标的样式,比如:
.iconfont{
	font-family:"iconfont";
	font-size:16px;
	font-style:normal;
	-webkit-font-smoothing: antialiased;
        -webkit-text-stroke-width: 0.2px;
        -moz-osx-font-smoothing: grayscale; 
        padding-left:20px
}
就可以在页面中引用和修改了。
技术分享
官网中还列出了使用时候的兼容性问题及其解决方法:Page 2
原文:作者-班星灿
链接:http://www.zhihu.com/question/25952487/answer/71917554
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
 
二、放到暂存架后,点击"下载到本地",xx.zip文件。按照demo.html文件说明进行设置
 

我再IEtester测试ie6,ie7,ie8,ie9,ie9图标右侧有方块,按上面page2说的加display:block;不管事。ie7不显示图标,在电脑浏览器ie9.0.8中也不显示

 

iconfont

标签:

原文地址:http://www.cnblogs.com/bomi/p/5601242.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!