先自我检讨一下下：
之前在上家公司写MUI的时候，就用过自定义字体图标了，没有整理。
到这家公司写ionic有用到了自定义字体图标，还是要去查一下再写，没有整理。
现在都写vue了,elementUI也有自定义字体图标，关于字体图标我还是没有整理。真的是对自己无语了，懒死你了都！！！
技术群里经常也有人问，一时半会儿也解释不清楚，所以趁着刚上班不太忙，先整理一下，免得又忘了/生无可恋脸！！！
万变不离其宗，原理都是一样的，mui太久，就先介绍一下 ionic 和elementUI的吧。
自定义字体图标的好处（我自己知道的）：
1、当框架自带的图标不能满足我们app或pc应用的需求时，就可以自定义了，想要什么就自定义什么，顺便还可以用一用阿里妈妈上图标，阿里妈妈图标库非常丰富且免费哦；
2、它比较小，不像png或者jpg、jpeg之类的比较大，加载慢，当然字体图标最适用于小图标；
3、也更容易控制其大小和颜色，当作字体来用就行，不会失真，模糊，当然svg也不会，但它跟png之类的一样，需要img,src引用。
自定义字体图标步骤：
第一步：在阿里妈妈上上传自己的图标（.svg格式），然后添加项目、修改图标名称、再下载到本地；
第二步：把相对应的字体文件添加到assets文件夹下的fonts文件夹下（没有，就自己创建一个fonts文件夹）；
第三步：把iconfont.css文件里的代码拷贝到项目的app.scss文件里，并修改图标的iOS和md适配；
第四步：应用，怎么用ionic框架自带的图标，就怎么用你自己自定义的图标，可懂？！！！
前提
首先你得有个阿里妈妈的账号和你需要的.svg格式的图标！！！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/51254.html