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

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

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

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

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