您的位置:起点软件下载字体工具iconfont

iconfont 阿里巴巴矢量图标库 官方免费版

软件大小:2222KB

用户评分:

软件类型:国产软件

运行环境:Win All

软件语言:简体中文

软件分类:字体工具

更新时间:2018/5/24 15:42:24

授权方式:免费软件

插件情况:无 插 件

iconfont 阿里巴巴矢量图标库是由阿里妈妈MUX倾力打造的矢量图标管理、交流平台。iconfont主要为icon设计师们量身打造,专注于原创图标设计,集图标搜索、下载、上传、管理等多项功能于一体,同时还能够将图标转化为字体应用,方便应用于web前端。

iconfont

【基本介绍】

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

【软件功能】

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

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


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


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


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


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


打赏:支持原创图标,尊重设计成果,在“用户”与“图标库”维度支持打赏,如果你喜欢哪位设计师,赶快去打赏吧~

【软件特色】

【海量图标自定义下载】
支持AI/SVG/PNG/代码格式下载
支持按路径改变icon颜色

【将图标转化为字体应用】
添加项目的图标,可以生成在线链接
以字体形式进行复用

【项目协同合作】
创建项目后上传icon,成员可以下载图标
前端同学可以将图标添加至代码

【原创icon交流平台】
我们提供一个原创图标共享、交流平台
尊重原创,尊重每个设计师

【使用教程】

iconfont图标绘制教程

1. 下载原文件 图标制作模板.AI
图标在绘制时均以标准图标大小1024x1024px绘制,因为在制作成字体时文件需要 设置较高的清晰度,所以图标路径也需要等比例放大。


2. 设置图标大小
设计师可以直接将画好的图标路径复制到模版里,根据模板的辅助线,对图标 进行位置的调节,居中,四周等距,保证图标的统一。


3. 另存为svg格式


4. 上传图标
将SVG文件拖拽至此,或点击上传


5. 命名图标及定义图标标签,完成上传


iconfont web前端应用教程


用户在iconfont.cn可以下载,多种格式的icon,平台也可将图标转换为字体,便于前端工程师自由调整与调用。

icon单个使用


单个图标用户可以自行选择下载不同的格式使用,包括png,ai,svg。
点击下载按钮,可以选择下载图标。


此种方式适合用在图标引用特别少,以后也不需要特别维护的场景。

比如设计师用来做demo原型。
前端临时做个活动页。
当然如果你只是为了下载图标做PPT,也是极好的。
不过如果是成体系的应用使用,建议用户把icon加入项目,然后使用下面三种推荐的方式。

unicode引用


unicode是字体在网页端最原始的应用方式,特点是:
兼容性最好,支持ie6+,及所有现代浏览器。
支持按字体的方式去动态调整图标大小,颜色等等。
但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。

第一步:拷贝项目下面生成的font-face


第二步:定义使用iconfont的样式


第三步:挑选相应图标并获取字体编码,应用于页面


font-class引用

font-class是unicode使用方式的一种变种,主要是解决unicode书写不直观,语意不明确的问题。
与unicode使用方式相比,具有如下特点:
兼容性良好,支持ie8+,及所有现代浏览器。
相比于unicode语意明确,书写更直观。可以很容易分辨这个icon是什么。
因为使用class来定义图标,所以当要替换图标时,只需要修改class里面的unicode引用。
不过因为本质上还是使用的字体,所以多色图标还是不支持的。

使用步骤如下:
第一步:拷贝项目下面生成的fontclass代码:


第二步:挑选相应图标并获取类名,应用于页面:


symbol引用


这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个svg的集合,与上面两种相比具有如下特点:
支持多色图标了,不再受单色限制。
通过一些技巧,支持像字体那样,通过font-size,color来调整样式。
兼容性较差,支持 ie9+,及现代浏览器。
浏览器渲染svg的性能一般,还不如png。
使用步骤如下:

第一步:拷贝项目下面生成的symbol代码:


第二步:加入通用css代码(引入一次就行):


第三步:挑选相应图标并获取类名,应用于页面:

【常见问题】

为什么下载字体,更新cdn都会提示error ?
iconfont平台也是依赖的第三方的c库fontforge来生成字体的,如果unicode不符合规范,或者图标本身的路径有问题,它会报错的。
遇到这种问题,可以直接把一半图标添加到一个新项目看看是不是有问题,一半一半的试,就可以排查出这个问题图标了。

为什么下载字体后,发现所有图标偏上了 ?
这种情况一半都是其中某些图标有问题,他们的图形可能超出了舞台,也可能是设计师粗心,在舞台外面有个点或者啥的。
总之这个图标会把整个字体撑开,我们需要参考上面的用二分法排除这个图标。删除重新生成字体即可。

审核一般要多久,有什么注意事项没?
审核一般1-2个工作日(不过如果审核同学忙暴毙,望谅解...)

审核不通过的原因可能是:
单色图标与多色图标混合在一个图标库内
没有符合绘制规则
图标质量实在辣眼睛
抄袭Iconfont线上已有多色图标
大家在对图标库和图标命名的时候,尽量如实描述,不要出现只有自己才能懂的火星文,考虑到图标库的公开属性,通用易懂比较绿色健康无公害

微博登录有问题?
微博登陆的问题,我们也很无奈,不是太稳定,也没有啥反馈的渠道,建议大家可以先使用github登陆,后续我们会尝试接入qq,微信啥的,或者自建账户体系。