前端框架增加自定义fontIcons的方法

在这里主要介绍的是阿里巴巴的矢量图标管理网站（Iconfont.cn），它也是国内首家推广Webfont形式图标的平台。Iconfont平台为用户提供在线图标搜索、图标分捡下载、在线储存、矢量格式转换、个人图标库管理及项目图标管理等基础功能。在这里分三点进行说明。

一、图标制作制作

设计师同学可以根据官方提供的设计规范进行制作，工具是AI，制作完成导出的时候需要另存为SVG格式。
制作完成就需要进行下一步上传操作。

二、个人图标管理

Iconfont.cn支持设计自己上传图标、收藏图标以及管理项目图标。

1、上传图标

在iconfont.cn平台的导航上有一个 上传图标 入口，点击该入口进入上传流程，选择您要上传的SVG格式图标。
由于图标存在iconfont.cn平台上搜索需要通过关键词和tag才能查询到图标，所以在上传图标的时候需要命名图标的名字和定义图标的tag。

2、管理图标

打开首页导航的‘图标管理’按钮，进入图标管理界面，以供查看“我上传的图标”、“我收藏的图标”、“项目管理图标”、“我的公开图标库”等分类。
用户可以在这里上传删除图标，收藏图标，进行图标的分类管理。图标分类管理是为了在实际项目中应用，这也是这篇博客的重点。

三、图标应用

fontIcons对于前端应用来说有很多便捷：

1. 只有变化大小；
2. 自由改变颜色；
3. 可以添加一些视觉效果，如阴影、旋转、透明度等等css3效果；
4. 兼容IE6。

下面介绍图标应用的步骤：

1、搜索图标

搜索找到自己需要的图标，点击会进入右上角的购物车中（可多选），见下图

2、项目管理

点击存储为项目,输入项目名称,如”mui-icon-add”,点击存储后,会跳转到项目管理页面.

3、下载字体

点击下载到本地,会将合并后的字体文件和自动生成的css文件全部下载到本地.

4、修改css

默认的如下:

@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- */

}



.iconfont {

  font-family:"iconfont" !important;

  font-size:16px;

  font-style:normal;

  -webkit-font-smoothing: antialiased;

  -webkit-text-stroke-width: 0.2px;

  -moz-osx-font-smoothing: grayscale;

}



.icon-nanzhuang:before { content: "\e600"; }



.icon-nvzhuang:before { content: "\e601"; }



.icon-gouwuche:before { content: "\e602"; }

我们可稍作修改,

• 为保证和框架目录结构统一，建议将字体文件放在fonts目录下，这样我们需要修改@font-face下得url属性；
• 字体文件类名需要和其他字体文件保持一致，方便调用。
• 只兼容iOS和Android版本的话，我们仅需要ttf格式的字体即可，其它字体可以删除；同时，我们也仅需保留-webkit前缀语法，-moz前缀部分可以删除；

修改后的代码如下:

    @font-face {font-family: "iconfont";

        src:url('../fonts/iconfont.ttf') format('truetype'); /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/

    }



    .iconfont {

        font-family:"iconfont" !important;

        font-size:16px;

        font-style:normal;

        -webkit-font-smoothing: antialiased;

        -webkit-text-stroke-width: 0.2px;

    }



    .icon-nanzhuang:before { content: "\e600"; }



    .icon-nvzhuang:before { content: "\e601"; }



    .icon-gouwuche:before { content: "\e602"; }

将iconfont.css及iconfont.ttf两个文件分别拷贝到mui工程css及fonts目录下，然后即可在框架中引用刚生成的字体图.
以mui框架为例，新增的字体应用在标签内代码如下：

<span class="mui-icon iconfont icon-nanzhuang"></span>

以上完！