先⾃我检讨⼀下下：
之前在上家公司写MUI的时候，就⽤过⾃定义字体图标了，没有整理。
到这家公司写ionic有⽤到了⾃定义字体图标，还是要去查⼀下再写，没有整理。
现在都写vue了,elementUI也有⾃定义字体图标，关于字体图标我还是没有整理。真的是对⾃⼰⽆语了，懒死你了都
技术⾥经常也有⼈问，⼀时半会⼉也解释不清楚，所以趁着刚上班不太忙，先整理⼀下，免得⼜忘了/⽣⽆可恋脸
万变不离其宗，原理都是⼀样的，mui太久，就先介绍⼀下ionic 和elementUI的吧。
⾃定义字体图标的好处（我⾃⼰知道的）：
2、它⽐较⼩，不像png或者jpg、jpeg之类的⽐较⼤，加载慢，当然字体图标最适⽤于⼩图标；
3、也更容易控制其⼤⼩和颜⾊，当作字体来⽤就⾏，不会失真，模糊，当然svg也不会，但它跟png之类的⼀样，需要img,src引⽤。
⾃定义字体图标步骤：
第⼀步：在阿⾥妈妈上上传⾃⼰的图标（.svg格式），然后添加项⽬、修改图标名称、再下载到本地；
第⼆步：把相对应的字体⽂件添加到assets⽂件夹下的fonts⽂件夹下（没有，就⾃⼰创建⼀个fonts⽂件夹）；
第三步：把iconfont.css⽂件⾥的代码拷贝到项⽬的app.scss⽂件⾥，并修改图标的iOS和md适配；
第四步：应⽤，怎么⽤ionic框架⾃带的图标，就怎么⽤你⾃⼰⾃定义的图标，可懂
前提
⾸先你得有个阿⾥妈妈的账号和你需要的.svg格式的图标
开始啦
有svg图标之后，登录阿⾥妈妈⽹站iconfont/
上传之后
提交之后
加⼊购物车，然后添加⾄项⽬
和Font Family；参照框架源码
编辑项⽬
⼀、ionic 的前缀是ion,Font Family是Ionicons；
zia
⼆、elementUI 的前缀是el-icon,Font Family是element-icons；这样才能在⽤的时候，当作框架⾃带图标来⽤，⽤法相同。
参照ionic框架源码图标
参照elementUI框架源码图标
发布评论