先自我检讨一下下：
之前在上家公司写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格式的图标！！！
svg图标
有svg图标之后，登录阿里妈妈网站http://iconfont.cn/
上传svg图标
上传之后
提交之后
加入购物车
添加至新项目
你可以直接下载代码，不过我建议先添加至项目，再下载代码到本地。因为，你可以先在项目里把图标名称改成相对应框架自带图标的前缀和Font Family；参照框架源码！！！
ionic图标源码
一、ionic 的前缀是ion,Font Family是Ionicons；
二、elementUI 的前缀是el-icon,Font Family是element-icons；
这样才能在用的时候，当作框架自带图标来用，用法相同。
点击编辑项目
参照ionic框架源码图标
ionic项目编辑
参照elementUI框架源码图标
elementui项目编辑
下载至本地
添加文件及app.scss
看截图，然后就可以用啦，和用框架自带的图标一样用法
app.scss:
app.scss
.Ionicons {
font-family:"Ionicons" !important;
font-size:2.4rem;//字体大小可以自定义
font-style:normal;
display:inline-block;
speak:none;
font-weight:normal;
font-variant:normal;
text-transform:none;
text-rendering:auto;
line-height:1;
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
.ion-reg-vercode:before,.ion-ios-reg-vercode:before,.ion-md-reg-vercode:before,
.ion-ios-reg-vercode-outline:before {content:"\e615"; }
//1首页通知.
ion-home-inform:before ,.ion-ios-home-inform:before,.ion-md-home-inform:before,
.ion-ios-home-inform-outline:before{content:"\e61a"; }
1、tab栏引用
2、其他引用
ionic总结：
第一步：在阿里妈妈上上传自己的图标（.svg格式），然后添加项目、修改图标名称、再下载到本地；
第二步：把相对应的字体文件添加到assets文件夹下的fonts文件夹下（没有，就自己创建一个fonts文件夹）；
第三步：把iconfont.css文件里的代码拷贝到项目的app.scss文件里，并修改图标的iOS和md适配；
第四步：应用，怎么用ionic框架自带的图标，就怎么用你自己自定义的图标，可懂？！！！
小细节：
1、在阿里妈妈上下载下来的代码，css中不会有iOS或者安卓格式的适配，直接是：
.ion-home-inform:before{ content: "\e61a"; }
这样，所以你需要自己在app.scss文件中手动添加成如下样子：
.ion-home-inform:before ,
.ion-ios-home-inform:before,
.ion-md-home-inform:before,
.ion-ios-home-inform-outline:before{content:"\e61a"; }
否则不显示；
用的时候直接：
<ion-icon name="home-inform" ></ion-icon>
2、还有，字体文件的路径一定要引用正确！！！
呃，废话有点多，不过，一步一步我都写的很清楚，还不懂的话可以私信我，关于elementUI字体图标，下一篇再写，太多了。
网友评论