使用阿里矢量图标库操作流程

使用阿里矢量图标库操作流程

1、地址

http://www.iconfont.cn

2、注册登录

登录常人只有两种方式：github、新浪，本人这里使用的GitHub，为了演示转让项目注册两个账号

 登录成功：

3、创建项目

菜单栏选择==图标管理==我的项目

4、选择图标并加入项目

点击进入官方图标库，选择适用于自己项目的图标

将需要的图标添加入库

选择完成，点击右上角购物车图标

选择添加至项目

选中自己项目名称点击确定

这里图标已经选好了，下面进入应用阶段。

5、查看在线引用地址

点击查看在线链接

点击生成

这里提供了三种使用方式，我们这里演示使用的是第二种 Font Class

在线预览样式内容：

 

 

 

 

6、修改图标样式名称

因实际项目使用时样式名称容易冲突，这里我们先进行修改

为了形成对比现将修改前的部分内容展示：

修改样式名称

编辑页面：

放大图：

 

这里选择仅保存（如果选择保存为副本，那么原图标将保存至我的图标中）

刷新样式代码：

重新在线预览：

注意：每次修改更新后的样式引用路径被重置，请重新引用重置后的样式地址

 

7、项目转让和成员添加

创建项目信息应用团队开发时，可以将团队中的人员加入项目中，（团队开发时注意如果有修改及时与他人沟通，不要坑队友！！！），因故不能继续参与项目开发时需要将项目相关信息交接给同事，使用转让来完成。

添加项目成员:选择项目中的==》更多操作==》编辑项目

在协作者中添加成员，这里成员是用户名

点击保存则完成成员添加操作。

 

项目转让：更多操作==》项目转让

转让成功后更多操作则不能编辑，项目列表页将变成我参与的项目

 

8、实战应用

项目应用才是所有操作的目的，下面一起来验证吧！

 

引用注意事项：

1、             引用时必须引用样式class="iconfont icon-xiuggaihoude-close-copy" 如果不引用iconfont则出不来

2、             如果直接打开html页面也是没有样式的，因为是服务器请求访问的这里我使用的是tomcat