我们先审视一下自己：
当我在上一家公司编写 MUI 时，我使用了自定义字体图标并且没有组织它们。
当我在这家公司写有关 ionic 的文章时，我使用了自定义字体图标。 写之前还是要检查一下，但是没有整理。
现在Vue写好了，elementUI也有了自定义字体图标了。 我还没整理出字体图标。 我真是对自己无语了，我对你真是太懒了！ ！ ！
技术群里经常有人问问题，一时也解释不清楚，所以我就趁着刚下班，不忙先整理一下，这样不要再忘记/感到沮丧！ ！ ！
一切都是一样的elementui 图标颜色，原理是一样的。 Mui太长了，先介绍一下ionic和elementUI。
自定义字体图标的好处（据我所知）：
1.当框架自带的图标不能满足我们的app或者PC应用的需求时，我们可以进行自定义。 我们可以定制我们想要的。 对了，我们还可以使用阿里妈妈上的图标，阿里妈妈的图标库极其丰富。 而且它是免费的；
2.它比较小，不像png或者jpg、jpeg比较大，加载速度慢。 当然，字体图标最适合小图标；
3.也更容易控制其大小和颜色。 只需将其用作字体即可。 它不会被扭曲或模糊。 当然svg也不会，但是它和png之类的一样需要img和src引用。
自定义字体图标的步骤：
第一步：在阿里妈妈上上传自己的图标（.svg格式），然后添加项目，修改图标名称，然后下载到本地；
第二步：将对应的字体文件添加到assets文件夹下的fonts文件夹中（如果没有，自己创建一个fonts文件夹）；
第三步：将iconfont.css文件中的代码复制到项目的app.scss文件中elementui 图标颜色，并更改图标的iOS和md适配；
第四步：应用，如何使用ionic框架自带的图标，或者如何使用自己自定义的图标，你明白了吗？ ！ ！ ！
前提
首先，你必须有一个阿里妈妈账号以及你需要的.svg格式的图标！ ！ ！
svg图标
开始了！ ！ ！
获得svg图标后，登录阿里妈妈网站
上传 svg 图标
上传后
上传后
提交后
提交后
添加到购物车并添加到项目
添加到购物车
添加到新项目
您可以直接下载代码，但我建议先将其添加到项目中，然后再将代码下载到本地。 因为，你可以先将项目中的图标名称更改为框架自带的对应图标的前缀和Font Family； 参考框架源码！ ！ ！
离子图标源代码
编辑项目
1、ionic的前缀是ion，字体家族是Ionicons；
2、elementUI的前缀是el-icon，Font Family是element-icons；
这样，使用的时候就可以当作框架自带的图标使用了，用法是一样的。
点击编辑项目
参考ionic框架源码图标
离子项目编辑器
参考elementUI框架源码图标
elementui项目编辑器
点击下载到本地
下载到本地
解压并添加到项目对应的文件夹中（如图所示）
添加文件和app.scss
看截图，然后就可以使用了，用法和使用框架自带的图标是一样的
应用程序.scss：
应用程序.scss
.离子图标{
字体系列：“Ionicons”！重要；
font-size:2.4rem;//字体大小可自定义
字体样式：正常；
显示：内联块；
说话：无；
字体粗细：正常；
字体变体：正常；
文本转换：无；
文本渲染：自动；
行高：1；
-webkit-font-smoothing:抗锯齿;-moz-osx-font-smoothing:灰度;
.ion-reg-vercode:之前,.ion-ios-reg-vercode:之前,.ion-md-reg-vercode:之前,
.ion-ios-reg-vercode-outline:在{内容:"e615"之前; }
