阿里巴巴矢量图标库Iconfont使用教程
阿里巴巴矢量图标库目前已经收录的将近一千万的图标，庞大的资源库几乎能够满足不同行业的不同需求，同时网站还支持图标定制，只打包自己想要的图标导入自己的项目。
使用方法：
第一步：注册帐号，目前只支持GitHub和新浪微博授权登录。
第二步：新建项目。
点击导航栏中的“资源管理”，“我的项目”，然后点击“新建项目”。
在弹出的页面中填写以下信息即可：
注意：
根据每个项目的实际要求填写FontClass/Symbol 前缀和Font Family。比如架构师导航站点使用的WordPress主题就要求这两项中必须输入：io，前后不能有空格，且前缀加中横线。
第三步：添加图标到项目
点击导航栏中的“图标库”，任意选择一个进入
看到合适的图标后，鼠标悬浮点击加入购物车，
然后在购物车这里就会看到添加图标数目，
点击购物车，选择项目，点击“添加至项目”，确定即可。
第四步：生成代码（每次添加新图标都要生成一次）
如果是第一次生成，显示的是“暂无代码，点此生成”。
第五步：复制代码到主题。
点击上图中的“点此复制代码”，复制成功。在WordPress后台主题设置>其他功能>阿里图标地址中粘贴保存。
第六步：在菜单中使用。
添加图标字体需要将菜单高级属性打开，登录WP后台→外观→菜单，进入菜单编辑管理页面，打开右上角的”显示选项“，勾选其中全部的“CSS类”，如图：
返回已建好的图标字体库页面，用鼠标复制图标代码，例如：io-zhuti
添加到菜单项目的CSS类中，前面必须加一个io，最终如：io io-zhuti，如图：
最后不要忘记保存菜单。
Iconfont有些图标字体大小不一，同一个字体库的偶尔也是如此，还好Iconfont提供了非常方便的编辑工具，可以自己调整大小、旋转等编辑操作。
相关文章
