uniapp uview引入阿里图标,u-dropdown自定义图标

1.去阿里图标库下载所需图标
uniapp uview引入阿里图标,u-dropdown自定义图标_第1张图片
2.解压 把iconfont.css放到项目文件夹
uniapp uview引入阿里图标,u-dropdown自定义图标_第2张图片

uniapp uview引入阿里图标,u-dropdown自定义图标_第3张图片

3.修改iconfont文件 删除其他的url 只留一个
uniapp uview引入阿里图标,u-dropdown自定义图标_第4张图片

后面是使用额名称或是去阿里图标图编辑查看
uniapp uview引入阿里图标,u-dropdown自定义图标_第5张图片
uniapp uview引入阿里图标,u-dropdown自定义图标_第6张图片
需要在u-icon上加custom-prefix属性就可以使用了
在这里插入图片描述

修改uview的组件找到下拉的组件
把组价接收的menuicon变成数组形式,对应标题
uniapp uview引入阿里图标,u-dropdown自定义图标_第7张图片
在这里插入图片描述
uniapp uview引入阿里图标,u-dropdown自定义图标_第8张图片
效果:
在这里插入图片描述

你可能感兴趣的:(前端,css,vue,uni-app)