使用阿里矢量图标库操作流程
使用阿里矢量图标库操作流程
1、地址
2、注册登录
登录常人只有两种方式:github、新浪,本人这里使用的GitHub,为了演示转让项目注册两个账号
登录成功:
3、创建项目
菜单栏选择==图标管理==我的项目
4、选择图标并加入项目
点击进入官方图标库,选择适用于自己项目的图标
将需要的图标添加入库
选择完成,点击右上角购物车图标
选择添加至项目
选中自己项目名称点击确定
这里图标已经选好了,下面进入应用阶段。
5、查看在线引用地址
点击查看在线链接
点击生成
这里提供了三种使用方式,我们这里演示使用的是第二种 Font Class
在线预览样式内容:
6、修改图标样式名称
因实际项目使用时样式名称容易冲突,这里我们先进行修改
为了形成对比现将修改前的部分内容展示:
修改样式名称
编辑页面:
放大图:
这里选择仅保存(如果选择保存为副本,那么原图标将保存至我的图标中)
刷新样式代码:
重新在线预览:
注意:每次修改更新后的样式引用路径被重置,请重新引用重置后的样式地址
7、项目转让和成员添加
创建项目信息应用团队开发时,可以将团队中的人员加入项目中,(团队开发时注意如果有修改及时与他人沟通,不要坑队友!!!),因故不能继续参与项目开发时需要将项目相关信息交接给同事,使用转让来完成。
添加项目成员:选择项目中的==》更多操作==》编辑项目
在协作者中添加成员,这里成员是用户名
点击保存则完成成员添加操作。
项目转让:更多操作==》项目转让
转让成功后更多操作则不能编辑,项目列表页将变成我参与的项目
8、实战应用
项目应用才是所有操作的目的,下面一起来验证吧!
引用注意事项:
1、 引用时必须引用样式class="iconfont icon-xiuggaihoude-close-copy" 如果不引用iconfont则出不来
2、 如果直接打开html页面也是没有样式的,因为是服务器请求访问的这里我使用的是tomcat