ionic（mui、elementUI）自定义字体图标

先自我检讨一下下：

之前在上家公司写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字体图标，下一篇再写，太多了。