环境: iMac, Hbuilder, iconfont网站,iPhone真机

参考文章: mui如何增加自定义icon图标: http://ask.dcloud.net.cn/search/q-bXVpLnR0Zg==#all

!!仔细阅读本文可达到理想效果!!

特别注意

想要使用自定义图标的话，下面图标统一都修改。只是修改一部分（例如两栏只修改一个图标）不起作用，应该是MUI的bug【20180810记】

1.下载iconfont图标

首先选购图标(免费)加入购物车:

image.png
image.png

演示需要, 我这里加了两个图标. 进入购物车

image.png
添加到项目, 如果没有项目可以先创建项目.
image.png
添加完成:
image.png

点击下载到本地.
下载完成后的文件有以下:

image.png
目前我要做的是在app项目中使用, 只需要应用其中的两个(选中的两个).

2.拖入项目并修改()

分别将css文件与ttf文件放入项目对应文件夹中:

image.png

2.1修改iconfont.css文件成以下格式(此步骤可省略):

@font-face {
    font-family: "iconfont";
    src:url('../fonts/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
}

.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
}

.icon-caidan:before { content: "\e608"; }

.icon-qianbao1:before { content: "\e63b"; }

2.2 修改manifest.json

找到manifest.json中的结构:
plus--> launchwebview--> subNViews--> tags
修改这两处:

image.png

{
                            "tag": "font",
                            "id": "indexIcon",
                            "text": "\ue63b",
                            "position": {
                                "top": "2px",
                                "left": "0",
                                "width": "50%",
                                "height": "30px"
                            },
                            "textStyles": {
                                "fontSrc": "_www/fonts/iconfont.ttf",
                                "align": "center",
                                "size": "30px"
                            }
                        }

同样修改另一个图标:

image.png

{
                            "tag": "font",
                            "id": "contactIcon",
                            "text": "\ue608",
                            
                            "position": {
                                "top": "4px",
                                "left": "50%",
                                "width": "50%",
                                "height": "24px"
                            },
                            "textStyles": {
                                "fontSrc": "_www/fonts/iconfont.ttf",
                                "align": "center",
                                "size": "24px"
                            }
                        }

完成, 效果如下:

image.png