环境: iMac, Hbuilder, iconfont网站,iPhone真机
参考文章: mui如何增加自定义icon图标: http://ask.dcloud.net.cn/search/q-bXVpLnR0Zg==#all
最新更新：2019-12-06 添加plus中底部选项卡参数说明
技术交流、疑问邮箱：dongzhensong@126.com
!! 仔细阅读本文可达到理想效果 !!
特别注意
想要使用自定义图标的话，下面图标统一都修改。只是修改一部分（例如两栏只修改一个图标）不起作用，应该是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"
}
}
参数说明：
tag：使用的tag形式，font表示使用字体图标
id：定义图标的id，需与其他icon区别开
text：字体图标中，图标对应的字体编码，可参考iconfont中的展示
position：子图图标的位置，注意是相对于tabbaritem(类似于iOS的UITabbarItem)的位置
textStyles：定义字体图标所处的位置，对齐样式以及字体图标大小等, _www为固定站点位置；
同样修改另一个图标:
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
