Hbuilder中如何新增替换mui框架中的多套多个icon图标

最近在用D厂的Hbuilder这款IDE，可以做跨平台移动开发。在学习H5的道路上摸索撞墙ing...

这次是在做跨平台的小应用的尝试，也是对Hbuilder的熟悉使用中，脑子不好使，所以记点笔记。（也可能不准确，但是自己测试好用...）

如何新增替换mui框架中的icon图标

点击此处查看官方教程

一、官方教程上少了几句话，可能导致替换或新增之后图标没有显示出来，下方的评论里已经有老司机指出来了，这里记录一下

按照官方文档集成之后图片还没有显示出来的话，检查一下以下几点
1.是否在标签中 了字体的css文件
2.按照教程修改css文件的时候，上部应该是如下这种格式：
@font-face {font-family: "iconfont";
  src:url('../fonts/iconfont.ttf') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
}
主要检查前面的src:是否被不小心删除；  语句末尾的逗号“，” 应该删除或者替换成分号 ； 

二、官方文档的评论里有同学说如果一个图标需要引用一次css文件和ttf文件。每次下载的图标字体文件命名都是iconfont，那需要多个图标的时候怎么办。
1.首先，如果你一次性下载很多图标的话，这些图标最后会打包成一套，最后生成一个css和ttf文件，这样就是很多图标在一起了。
2.如果分几次在不同网站下载的，我尝试过把多个自定义的图标css和ttf文件合并，然而并没有成功...
那你说咋办，改名呗...笔记如下...

需要多个图标的时候，每个图标下载完之后，第一件事先把css和ttf的文件名修改成你想要的文件名。
以下图片，对应的各个名字我都用相同的颜色和备注标注了。
例如图1,将修改名字后的文件放入对应文件夹中并在index中引用改名后的css文件：

1.修改文件并引用css文件.png

图2为css文件内部：
粉色为font-family name，跟下方的font-family 保持一致就好
红色是图一中修改的ttf文件名字
白色 是图标字体的父 名称，调用图标字体的时候需要，一会见图3
蓝色 是图标字体的名称，调用图标字体的时候需要，一会见图3

2.在css文件中根据修改后的名字引用ttf文件.png

图3是index.html文件内部，调用新的图标字体
白色 是图标字体的父 名称，对应图2白色
蓝色 是图标字体名称 ，对应图2蓝色

3.调用图标字体.png

以此类推，需要添加多个图标字体的话，这样操作就可以了。
三张图中对应颜色的名称都可以成对的随意修改。