首页 >> 秀友百科词条 >> 技术开发测试 >> iconfont使用教程

iconfont使用教程[编辑]


概述
iconfont使用教程是介绍一些iconfont的功能和使用方法,教导使用者,帮助使用者对iconfont更加熟悉和操作。

一、简介

iconfont是阿里妈妈MUX倾力打造的矢量图标管理、交流平台。设计师将图标上传到Iconfont平台,用户可以自定义下载多种格式的icon,平台也可将图标转换为字体,便于前端工程师自由调整与调用。

iconfont网站:http://www.iconfont.cn/

二、功能介绍

1、支持关键词模糊搜索,可以搜图标搜用户,中文 / English / Ping yin 无缝互译

2、下载详情页:可查阅icon归属图标库与作者,多色图标支持分路径改色,下载图标自动保存最近使用的颜色

3、购物车:将图标加入购物车后,可以批量下载素材和代码、批量添加至项目

4、支持单个或批量上传多个icon、支持单色/多色icon同时上传、支持图标自定义配置标签

5、图标库是一系列相关图标的集合,由图标上传者创建,需通过审核才可公开/加密访问 图标库分为官方图标库/自定义图标库/多色图标库

6、“项目”是帮助团队协同合作的共享模块,创建项目后,视觉同学上传icon,交互/产品同学可以⾃自由下载图标,前端同学可以将图标以字体格式添加至代码,支持三种格式代码使用。

7、支持原创图标,尊重设计成果,在“用户”与“图标库”维度支持打赏。 

三、iconfont使用教程

1、进入阿里巴巴矢量图标库官网:http://www.iconfont.cn/,然后注册登录,或者用github登录;

2、找到图标管理->我的项目->然后新建项目:右边点击新建项目,用于保存自己常用的图标;

3、项目新建完成后,往项目里添加我们要想使用的图标,找到图标库,搜索一个想要的图标,然后添加到购物车;

4、添加到购物车完成后,购物车徽章数字应该显示1了,点击右上角的购物车图标,选择添加至项目,选择我们刚刚创建的项目,确定;

5、将打包好的字体文件下载到本地添加到你的项目中,在项目中引用文件中的iconfont.css文件;

6、创建一个i标签或者span标签,添加两个类名,一个固定的是iconfont,另一个是你想要的那个图标对应的类名。

建议:可进入iconfont官网,阅读相关文章以及查看“帮助”了解更多相关的知识,方便操作使用。

参考资料: http://www.iconfont.cn/
扩展阅读:
合作编辑: 谭周权 

秀友百科词条内容均由网友提供,仅供参考。如发现词条内容有问题,请联系管理员。

词条信息

浏览次数:14

编辑次数:0历史版本

创建者: 谭周权

最近更新:2017/11/1 7:44:44

关于秀友百科| 版权声明| 联系方式| 常见问题

秀友百科是网络营销能力秀指定的教学实践平台

深圳市竞争力科技有限公司版权所有