科技助力经济发展

© 2024  TMTforum
首页 声音 项目 正文

Iconfont矢量图标平台全面升级

作者：一淘UX 时间：2013-11-26 0

Iconfont.cn是由阿里巴巴UX部门推出的矢量图标管理网站，也是国内首家推广Webfont形式图标的平台。网站涵盖了1000多个常用图标并还在持续更新中，Iconfont平台为用户提供在线图标搜索、图标分捡下载、在线储存、矢量格式转换、个人图标库管理及项目图标管理等基础功能

iconfont.cn为解决设计师制作字体图标困难的问题，为用户提供了在线矢量格式转换的功能。设计师只要将设计好的图标上传至平台，平台将会将图标存储在平台上，并转换成多种格式文件。

iconfont对于前端应用来说有很多便捷：
1、自由变化大小
2、自由修改颜色
3、可以添加一些视觉效果如：阴影、旋转、透明度。
4、兼容IE6

本文只说如何在网页中应用图标字体iconfont，具体使用方法如下：
在http://www.iconfont.cn/选择适合的图标然后添加到那个“购物车”选择下载到本地

第一步：使用font-face声明字体

@font-face {font-family: 'iconfont';
    src: url('iconfont.eot'); /* IE9*/
    src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('iconfont.woff') format('woff'), /* chrome、firefox */
    url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('iconfont.svg#uxiconfont') format('svg'); /* iOS 4.1- */
}

第二步：定义使用iconfont的样式

.iconfont{font-family:"iconfont";font-size:16px;font-style:normal;}

第三步：挑选相应图标并获取字体编码，应用于页面

!

PS:将需要文件上传到空间，字体文件引用路径要注意；如需演示，请看文章页title下图标字体

TAG：

fengsan

海内存知己,天涯若比邻
觉得文章不错，微信扫描分享好友

热门文章

© 2011 - 2024  钛锋网  TMTForum.com