mui如何增加自定义icon图标

mui如何增加自定义icon图标

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

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

mui如何增加自定义icon图标_第1张图片

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

mui如何增加自定义icon图标_第2张图片

3.选择下载至本地

mui如何增加自定义icon图标_第3张图片

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

mui如何增加自定义icon图标_第4张图片

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

mui如何增加自定义icon图标_第5张图片

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

mui如何增加自定义icon图标_第6张图片

7.引入iconfont.css文件

mui如何增加自定义icon图标_第7张图片

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

mui如何增加自定义icon图标_第8张图片

9.最终效果图如下:

mui如何增加自定义icon图标_第9张图片

你可能感兴趣的:(学习ing)