图标字体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
    沙发
    JKUN 2014-07-24 06:50

    博客做的不错~喜欢 :happy:

  2. avatar
    板凳
    JV 2014-07-02 06:43

    今天刚用这个改了网站,没想到在你这又看到了。

  3. avatar
    地板
    艾青 2014-06-04 09:24

    非常好看的字体,喜欢。

  4. avatar
    4 楼
    合原动力 2014-01-21 08:07

    哦,一直在用 bootstrap的图标字体,但是完全不知道怎么修改啊

  5. avatar
    5 楼
    保罗主机-Ricky 2013-12-26 04:38

    不错的字体,业界良心!

  6. avatar
    6 楼
    China Travel Advice 2013-12-11 02:39

    非常好看的字体!

  7. avatar
    7 楼
    馒头饭MADfan 2013-12-10 02:11

    真心厉害的作品哦!

  8. avatar
    8 楼
    小草元 2013-12-09 16:01

    真是头一次见这css,颇惊讶+看不懂。各浏览器的声明把我整乱了。
    话说哥们你是一高手啊,失敬,失敬。

  9. avatar
    9 楼
    seri 2013-12-02 13:41

    哇噢噢噢!居然开放了啊。一直想用啊。。。。谢谢。。。。

  10. avatar
    10 楼
    大路 2013-11-30 15:01

    我想请问一下,你知道怎么把首页第一篇文章的标题或者摘要的颜色变成其他颜色么?