我觉得我这个人特别健忘,中午吃的饭,下午就会忘了吃的什么菜。所以啊,好记性不如烂键盘,真的得要好好记录一下每个阶段的学习心得了。
今天早上我们程序员小哥哥问我会不会做字体图标,愣了好几秒,感觉整个人都呆萌了呢 (字体图标是啥啊,iconfont吗,表示每次做界面都是直接从里面下来用的啊)哦。。。。。原来小哥哥不是这个意思,原来icon-font是用字体文件代替图片文件的意思,也就是一段代码。(这我怎么会做(ΩДΩ),赶紧打开了iconfont看功能介绍)。
居然还有这样的操作啊 ,嗯。。。还蛮强大的。(立马下载平台里给的图标模板并打开AI,开始制作icon),但是并没有想象的那么顺利,虽然和别人的操作是一样的,但上传的时候还是会出问题,比如报错说“svg太大啦,不要超过40kb哦”,偶尔也会上传成功,但是呢,是空白的。就这样边百度边实验了好几个小时,也不得行。后来我就一个一个试了(是有点笨),离下班还有一个小时的时候终于试成功了,原因是在AI里保存svg的时候,勾选了“保留Illustrator编辑功能”。
现在来画一个“添加”图标,总结一下在iconfont里上传图标的流程
Step1:打开下好的图标模板/新建一个合适画icon的画布
Step2:用形状工具画出添加图标,如下
Step3:现在要通过“对象——路径——轮廓化边缘”来把路径转换成形状(如果保存为路径,上传以后就是空白的),如下图
Step4:保存为svg格式。
Step5:点保存后会弹出一个对话框,记得千万别勾“保留Illustrator编辑功能”,千万别勾“保留Illustrator编辑功能”,千万别勾“保留Illustrator编辑功能”。
Step6:把刚才生成的icon.svg拖入iconfont的上传区域,就可以正常显示了
以后再也不用担心图标会模糊了