图标字体iconfont

今天说的是阿里UX矢量图标库,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;}

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

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

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

评论 ( 28)
  1. avatar
    沙发
    仲花得花 2013-11-28 13:48

    对于代码这一块,我是真的不懂一点!

  2. avatar
    板凳
    枫先生 2013-11-28 07:03

    为何都在讲首页呢~

  3. avatar
    地板
    微历史 2013-11-27 08:29

    设计用的着

  4. avatar
    4 楼
    冷影秋 2013-11-25 11:46

    来逛逛……

  5. avatar
    5 楼
    tiandi 2013-11-25 01:57

    首页感觉怪怪的。

  6. avatar
    6 楼
    海棠果 2013-11-24 09:46

    好东西

  7. avatar
    7 楼
    无纯洁 2013-11-24 07:43

    好东西~

  8. avatar
    8 楼
    Mr.童 2013-11-24 01:46

    这个东西我也下载了

  9. avatar
    9 楼
    大发 2013-11-21 05:40

    那首页真先进

  10. avatar
    10 楼
    FROYO 2013-11-20 23:59

    那行字好像是少了一块

    • avatar
      回复
      andy 2013-11-21 00:34
      @FROYO 那个地方有问题,我用firefox和chrome都没发现啊