yicon 图标字体平台可以容纳的图标数量是有限的,总共 6400 个编码,因此建议在使用过程中,请注意以下几个问题:

  • 尽可能对图标进行复用,上传时避免上传重复的图标,大库管理员或超级管理员在审核图标时,对于重复的图标可以审核不通过。
  • 上传的图标需要大库管理员或超级管理员审核通过后才能使用。
  • 上传的图标审核通过后,不能删除,但是支持图标上传者、大库管理员和超级管理员进行替换。
  • 上传图标时请上传 svg 格式文件,需要遵守一定规则,具体规则参见图标制作说明
  • 图标大库只有超级管理员有权限新建,且新建后不可删除、不能修改大库名字,但支持修改大库管理员。
  • 每个用户可以创建自己的项目(成为项目负责人),项目负责人可以管理项目和项目成员,配置上传 source 路径,也可以将项目负责人权限移交给项目成员。
  • 用户可以从任意大库中通过小车添加图标到项目中,小车中的图标可以保存到一个新项目,也可以保存到已有项目。

首页

使用攻略 #

工程师 #

  • 点击导航上的登录按钮,进行登录
  • 点击某个大库 A,进入图标库 A,根据需要挑选需要的图标
  • 将鼠标指针移动到对应图标上,在浮层上点击左上角的小车图标,将该图标加入到导航上的小车中,可以选择多个图标,也可以跨图标库进行选择添加
  • 图标挑选完成后,点击导航上的小车,可以查看已选的图标(移动到具体图标上,点击其右上角的 X,可以从小车中删去该图标)
  • 移动到“保存为项目”按钮上,点击“保存为项目”,输入项目名;或点击“保存到已有项目”,选择具体项目名,点击确认,成功创建一个图标,并自动跳转到“我的图标项目”
  • 点击“下载全部图标”按钮唤起一个弹窗,点击“生成版本并下载”按钮下载该项目对应的字体文件
  • 解压 zip 压缩包,即可使用其中的字体文件

设计师 #

  • 点击导航上的登录按钮,进行登录
  • 点击导航右侧上的上传按钮,跳转到上传页面
  • 将设计制作好的 svg 图标拖到上传区域;或点击页面中部的“上传按钮”,选择文件进行上传
  • 页面跳转到工作台进行图标设置,选择图标风格、上传的大库等,点击“确认并完成上传”
  • 图标上传完成,等待大库管理员或超级管理员审核通过
  • 审核通过后,上传的图标将会展示对应的大库中,以供其他用户选择使用

权限说明 #

未登录用户 #

用户在未登录状态下可以下载图标,查看平台图标使用统计信息,但是无法上传图标、编辑标签和创建项目。

登录用户 #

成功登录平台的用户的权限分为 3 级:普通用户、大库管理员(以下简称库管)和超级管理员(以下简称超管):

  • 普通用户:上传、下载和编辑图标,创建项目等。
  • 库管:在普通用户的基础上,还可以针对对应大库进行替换图标、修改图标名称、查看日志、审核图标等。
  • 超管:在库管基础上,有所有大库和项目的权限,支持新建大库、修改库管,修改项目负责人,增删超管,管理系统占用编码(问题编码)等。

项目相关 #

项目负责人和项目成员实际与上文提到的无直接关联,因此将在项目中再来介绍。

图标库 #

图标库主要用于对上传的图标进行分类管理,大库包含首页图标展示,以及进入大库后字体上传、下载和编辑等功能。

  • 所有用户均可对大库进行图标上传下载、添加图标到项目中,能够在界面中对图标增删标签等图标基本信息的编辑;图标上传者可以对自己上传的图标进行替换,等待库管审核通过后生效。
  • 库管可以直接进行图标替换。
  • 超管在“权限管理”进行大库新建,库管变更等。

大库

项目及管理 #

项目管理是链接图标制作和使用的桥梁,设计者制作的图标通过这一过程被开发者筛选整理,最终生成一份可用字体。在整个项目管理的过程中,一般是设计者或前端开发的负责人创建一个对应的项目,然后添加项目成员,让大家均可维护该项目。当项目图标添加完成之后,就可以生成一份字体,发布到线上供项目使用。以下将重点对该项功能进行介绍:

项目成员 #

  • 项目负责人:一般是项目创建者,拥有管理整个项目的权限,包括编辑项目、删除项目、管理项目成员、配置 source 路径和调整基线等,同时负责人需要对整个项目负责;任何用户都可以创建项目,成为项目负责人。
  • 普通成员:下载图标,同步 source,查看日志,历史版本和项目变更等。

项目新建 #

  • 项目新建:项目主要可以通过两个入口进行新建,通过小车将小车中的图标保存为一个新项目,或者通过图标项目的左侧栏的新建项目入口创建一个空项目。

项目新建

  • 项目拷贝:点击“图标项目”页的“拷贝项目”按钮,将一个已有项目进行拷贝,自动将所有图标添加到一个新项目中。

项目拷贝

项目使用 #

  • 下载全部图标:将项目中的所有图标生成字体文件,下载到本地的是 zip 压缩文件,文件名为 project-项目名-版本.zip,例如 project-demo-0.1.0.zip,里面包含四份不同格式的字体文件(.ttf、.svg、.eot 和 .woff)和一份 html 说明文件;在实际项目中根据需要使用这些字体文件。

下载全部图标

说明文件

  • 同步 source:根据配置好的上传 source 路径,直接将图标字体文件上传到 source 上,上传成功后弹窗提示字体文件路径,点击复制后直接在代码中使用,跳过了下载解压字体文件,再上传到 source 服务的流程。

同步 source

同步 source

同步 source

  • 查看项目日志:查看当前项目的一系列变动,包括添加删除图标、升级图标项目版本、成员变动、公开项目审核等信息。

查看项目日志

  • 历史版本和版本对比:查看当前项目的历史版本,比较不同版本间图标变化情况。

历史版本

  • 项目变更查看:对比当前项目工作区的图标与已生成的最高版本的图标进行对比,如果两者之间存在图标增加、删除或替换,图标编码被标记为系统占用等情况时,在左侧导航栏的项目名称右侧会有状态变更条数通知,在项目工作区对有变更的图标进行特殊标记。

项目变更

项目管理 #

  • 编辑项目:修改项目名称和项目负责人。
  • 删除项目:删除项目,该操作不可恢复,请谨慎操作。
  • 管理项目成员:添加或删除项目成员。
  • 配置 source 路径:指定图标字体上传路径,第一次进行“同步 source”操作前需要先配置该项。
  • 调整基线:勾选调整基线后,图标将向下偏移,更适合跟中英文字体对齐。
  • 申请公开项目:项目负责人提交申请项目为公开项目,超管审核通过后,该项目将会在公开项目页面进行展示,一般被多个业务线共同使用、被经常查阅的图标项目,可以申请成为公开项目。

公开项目申请入口

第一次生成版本

公开项目输入框

公开项目审核入口

公开项目待审核审核页面

公开项目已通过审核页面

公开项目列表入口

公开项目列表页面

图标 #

图标上传 #

可以通过顶部导航上传入口或具体大库中的“上传新图标”入口进行上传。

图标上传

图标调整 #

直接上传阿里字体平台上的图标到 yicon 上,会显示异常、同时生成的字体文件也会无法正常使用,所以在上传过程中,需要手动调整,适配 yicon 平台

图标调整前

图标调整前

图标下载 #

支持下载 svg 和 png 两种格式的图标。

图标下载

图标替换 #

在大库中,超管、库管或图标上传者可以对原有图标进行替换,超管、库管替换直接生效,非超管、库管的图标上传者替换时需要超管、库管审核通过后方能生效。图标替换不会对图标码值进行修改,但是可以修改名称、标签等。因此这里对已上线图标的替换要进行严格的把关,必须保证图标含义不变,仅为微量调整。

图标替换

图标编辑 #

编辑图标的名称和标签

图标编辑

图标审核 #

超管、库管对用户上传或替换的图标进行审核。

图标审核

图标统计 #

统计当前平台已使用的编码和对应的图标。

图标统计

图标制作说明 #

根据样式规范制作图标,上传到平台才能够正常显示和使用,图标制作者创作前请先阅读。

图标制作说明

权限与编码管理 #

权限管理 #

  • 大库权限设置:新建大库,修改大库管理员。
  • 项目权限设置:新建项目,修改
  • 超管增删管理

编码管理 #

  • 系统占用编码:超管可以手动添加问题编码,也可以从 yicon-problem-code 同步,指定编码被系统占用后,如果该编码已被分配给图标,则该图标在大库中被删除,同时系统默认上传一个对应的图标到该大库,上传的图标除编码重新分配外,其他均和被删除的图标保持一致,同时如果对应该编码的图标在项目中被使用,则会在项目中标记为“系统占用”,用户需要手动删除该图标,并添加对应上传的新图标。如果编码未被分配,则后续上传新图标时,该编码将不会被进行分配,自动跳过。

系统占用编码

其他 #

搜索 #

支持通过图标名称、标签和编码进行图标搜索,在使用编码搜索时请输入完整编码,例如 

图标搜索

消息 #

查看与自身相关的消息,包括图标审核结果,大库、项目变更等消息。

我的消息

版本说明 #

图标项目引入了版本这一概念,能够更好地管理项目,详细了解到项目的变更情况:在使用过程中,当项目新增、删除或替换图标时,无论下载还是同步 source 前必须先升级项目版本,根据变更情况,可通过小版本迭代较少变化重大变更等三种方式进行图标项目版本升级。