向着太阳微笑

知足常乐

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

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

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


阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

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

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭