uniappuViewUI1.x扩展自定义图标

uView已通过大量的实践中&＃xff0c;收集了用户最有可能需要用到的图标&＃xff0c;但我们也相信&＃xff0c;它肯定无法覆盖所有的场景和需求。

用户也可以使用标签的方式&＃xff0c;自行引入字体图标&＃xff0c;为何要通过扩展的方式集成呢&＃xff1f;

这是因为uView有统一的字体图标组件&＃xff0c;使用方便&＃xff0c;配置灵活&＃xff0c;且风格统一。

注意&＃xff1a;本篇文章是 uView UI 1.x 的版本扩展自定义图标教程

在 iconfont-阿里巴巴矢量图标库&＃xff08;https://www.iconfont.cn&＃xff09;下载图标文件

1&＃xff09;打开Transfonter网站 https://transfonter.org/https://transfonter.org/

2&＃xff09;点击 Add fonts 按钮 添加 ttf 文件并设置选项

注意下图的几个配置项情况

3&＃xff09;添加完成后点击 Convert 按钮转换并下载文件

1&＃xff09;将转换后的 iconfont.css 文件复制到项目的 icons 目录中(名字自行调整)

2&＃xff09;将转为base64编码 stylesheet.css 的内容复制到上面的 iconfont.css 文件中&＃xff0c;并覆盖掉 iconfont.css 中的 &＃64;font-face 部分

文件合并后的整体效果效果示例&＃xff08;注意文件中几处内容的同步&＃xff09;

自定义扩展图标


效果图

作者&＃xff1a;黄河爱浪 QQ&＃xff1a;1846492969&＃xff0c;邮箱&＃xff1a;helang.love&＃64;qq.com

本文原创&＃xff0c;著作权归作者所有&＃xff0c;转载请注明原链接及出处。