mui增加自定义icon图标

1.打开阿里巴巴矢量图标库,选中你想要导入的图标后加入购物车,网页右侧打开购物车,选择"添加至项目",然后下载至本地。mui增加自定义icon图标_第1张图片
解压后会得到如下文件,只兼容iOS和Android版本的话,仅需要ttf格式的字体即可,其它字体可以删除;即箭头所指为有用文件,其他可以删除。
mui增加自定义icon图标_第2张图片
此时只需把这两个文件分别复制到mui工程文件夹中css文件夹和fonts文件夹下,然后修改iconfont.css即可:
mui增加自定义icon图标_第3张图片

此为下载文件中默认iconfont.css文件的代码:
mui增加自定义icon图标_第4张图片
仅需保留-webkit前缀语法,-moz前缀部分可以删除。修改后的iconfont.css文件的代码:mui增加自定义icon图标_第5张图片
初始样式:
mui增加自定义icon图标_第6张图片

在这里插入图片描述
错误修改:

在这里插入图片描述
正确修改:
mui增加自定义icon图标_第7张图片

在这里插入图片描述
另外如需修改多个图标,只需全部加入同一项目的购物车下载即可
mui增加自定义icon图标_第8张图片
如我还需修改"我的"图标,加入后下载,得到的压缩包和之前类似,操作也一样,唯一有区别的就是下面多了一个样式,使用对应的名字即可。mui增加自定义icon图标_第9张图片
mui增加自定义icon图标_第10张图片
在这里插入图片描述

你可能感兴趣的:(webapp,webapp)