美文网首页
IconFont字体图标制作初体验

IconFont字体图标制作初体验

作者: 捡豆豆 | 来源:发表于2020-09-17 18:53 被阅读0次
       矢量技术应用的普及 基本程序里的小图标都换上了字体图。一般都是UI设计师把图标放在iconfont上 我们直接使用就好了,正好前几天我个人需要几个小图标,就去iconfont官方图库去找一找,发现没有找到我要的,决定动手撸几个。(码农的初体验)
总结几个注意的点:
1.图标栅格
图标网格.jpg

阿里巴巴矢量图标库在制定基准框的时候考虑到图标展现的标准尺寸:16X16、32X32、64X64、128X128;特设置了一个可以整除他们的尺寸:1024X1024
所以在AI(illustrator)首选项中设置一下网格线的间隔,1024/X=?把算出来的值尽可能精确的填入网格线间隔这项中
我的是1024/16=64px

2.工具栏的设置

将窗口->工具栏->基本设置成高级 这样有更多的选项 如圆角矩行等

3.两个图行叠加 去除重叠部分

选中叠加的两个图层,选择对象->复合路径->建立


订单失效.jpg
4.导出svg格式
5.上传iconfont 去掉颜色 就可以了 简单的一个字体图标就完成了

相关文章

  • 组件化集成化

    制作图标字体 icomoon、可以自己导入svg制作字体。iconfont,

  • IconFont字体图标制作初体验

    矢量技术应用的普及 基本程序里的小图标都换上了字体图。一般都是UI设计师把图标放在iconfont上 我们直接使用...

  • Android中iconfont的应用

    iconfont是什么 iconfont翻译过来就是矢量字体图标,通过字体文件取代图片来展示图标,特殊字体等元素的...

  • IconFont在Android中的使用

    什么是iconFont iconFont顾名思义是字体图标,图标就藏在字体文件里面,看着是个图标,其实却是个文字,...

  • Flutter学习笔记07-Icon

    Fluttter中,可以像Web开发一样使用iconfont,iconfont即“字体图标”,它是将图标做成字体文...

  • Flutter 使用自定义字体图标icon

    Flutter中,可以像Web开发一样使用iconfont,iconfont即“字体图标”,它是将图标做成字体文件...

  • 手把手教你使用字体图标

    常用字体图标库 阿里字体图标库 iconfont fontawesome 字体图标库 首先使用阿里的字体图标库上个...

  • 字体图标和文字垂直居中

    字体图标使用iconfont字体图标库 1. stylus样式 2. html样式

  • 字体图标

    常用的字体图标 [阿里字体图标库]http://iconfont.cn/ [Font Awesome]http:/...

  • iconfont

    1.字体图标