icon 做成html形式,iconfont.html

- 阿里巴巴矢量图标库

阿里巴巴矢量图标库简介

Iconfont.cn是由阿里巴巴UX部门推出的矢量图标管理网站，也是国内首家推广Webfont形式图标的平台。网站涵盖了1000多个常用图标并还在持续更新中，Iconfont平台为用户提供在线图标搜索、图标分捡下载、在线储存、矢量格式转换、个人图标库管理及项目图标管理等基础功能。同时iconfont.cn平台作为矢量图标倡导者，积极在线分享矢量图标制作经验、前端应用说明，及应用中常见的一些问题。

官网地址：http://www.iconfont.cn/

图标搜索

查找图标

使用教程

• 1 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#iconfont') format('svg'); /* iOS 4.1- */

  }

• 2 定义使用iconfont的样式

  .iconfont{

  font-family:"iconfont";

  font-size:16px;font-style:normal;

  }

• 3 挑选相应图标并获取字体编码，应用于页面

  <i class="iconfont">&#33</i>

By：zihan's blog

Copyright H+ © 2014

一键复制

编辑

Web IDE

原始数据

按行查看

历史