mui如何增加自定义icon图标

时间:2024-03-26 17:31:04

mui如何增加自定义icon图标

mui提供了一些基本的icon图标,同时也支持使用者自定义图标,那应该怎么做呢?以阿里巴巴矢量图标库为例,介绍如何添加自定义的图标,亲测有效

1.打开阿里巴巴矢量图标库搜索你所需要的素材图标,选择图标并加入购物车

mui如何增加自定义icon图标

2.打开购物车,选择“添加至项目”,为项目命名,点击确定

mui如何增加自定义icon图标

3.选择下载至本地

mui如何增加自定义icon图标

4.解压文件夹得到如下文件:

mui如何增加自定义icon图标

5.将iconfont.css及iconfont.ttf两个文件分别拷贝到mui工程css及fonts目录下

mui如何增加自定义icon图标

6.修改iconfont.css文件部分内容

mui如何增加自定义icon图标

7.引入iconfont.css文件

mui如何增加自定义icon图标

8.修改class名即可,在需要修改的图标的span中加上类名iconfont icon-dongtai即可(dongtai为第2步中命名的项目名称)

mui如何增加自定义icon图标

9.最终效果图如下:

mui如何增加自定义icon图标