uni-icons中添加自定义图标

由于项目需要，uni-icons自带的需求图标无法满足业务需要，故需要增加自定义图标，借此记录以便后期快速添加

所需工具

http://fontstore.baidu.com/static/editor/index.html# 翻译ttf字体
https://www.motobit.com/util/base64-decoder-encoder.asp 把ttf字体编译成base64格式
https://www.iconfont.cn/ 阿里字体图标库
https://uniapp.dcloud.io/h5/pages/extUI/icons/icons uni-icons图标地址

制作步骤

在设计师手中拿到图标的svg格式，并上传到【阿里字体图标库】
在阿里字体图标库中，【下载代码】-下载之后找到【.ttf】字体文件以备用
【如下为—重要步骤】打开uni-icons字体图标网址 https://uniapp.dcloud.io/h5/pages/extUI/icons/icons，下载uni-icons字体步骤如下
打开网址 http://fontstore.baidu.com/static/editor/index.html# 把uni-icons下载的字体上传上去
打开完uni-icons图标后，在导入从阿里下载下来的字体图标
导入之后的结果为
在把合并的字体导出成.ttf字体文件
把导出的ttf字体文件，转换成base64 打开网址：https://www.motobit.com/util/base64-decoder-encoder.asp
把复制出来的base64内容，出去换行和空格，我使用的工具是【notepad++】
把处理好的base64文件内容复制到，uni-icons.vue 替换对应的地方
在icon.js中增加刚刚的字体名字中文名字可以自己取，后面的编码必须为当时生成的编码

uni-icons中添加自定义图标相关推荐

D365 CRM 在视图中添加自定义图标
此示例在客户视图中显示自定义图标,我在客户实体上添加了一个自定义字段 "客户等级" ,选项集有重点(Value = 1)和普通(Value = 2),根据选项集的不同显示不同的图标 ...
中的隐藏鼠标菜单_如何在鼠标右键菜单中添加自定义菜单？工效率提升一倍...
人都是"懒"的,在使用电脑时,对于常用的操作,步骤太多用久了难免会产生烦躁的情绪,虽然系统已经自带了很多快捷方式,但还是不够用,我们通常都会把常用的东西通过快捷方式来添加到桌面,但 ...
Dynamics CRM 向视图列添加自定义图标和提示信息
本篇介绍如何向视图中的某列添加自定义图标和提示信息,先来看下最终的效果,联系人的性别系列显示了(这里男女性别图标反了,就懒得重新截图了),鼠标放到图标会有提示信息(这里图截不出来). 那要怎么实现上述 ...
如何在鼠标右键菜单中添加自定义菜单？工效率提升一倍
人都是"懒"的,在使用电脑时,对于常用的操作,步骤太多用久了难免会产生烦躁的情绪,虽然系统已经自带了很多快捷方式,但还是不够用,我们通常都会把常用的东西通过快捷方式来添加到桌面,但 ...
百度地图添加自定义图标标注以及自定义动画效果
百度地图添加自定义图标标注以及自定义动画效果 1.添加自定义图标标注 2.添加自定义动画效果 2.1.标注对象marker的构成 2.2.自定义动画效果实现过程 2.3.最终实现效果上次写的是添加自 ...
wordpress 自定义_如何在WordPress中添加自定义字体
wordpress 自定义 Do you want to add custom fonts in WordPress? Custom fonts allow you to use beautiful ...
qgis 图片_如何在QGIS中添加自定义的Mapbox底图？
MapBox提供的底图产品是我目前最喜欢的两个地图源之一.他们除了Studio供用户自定义底图外,还提供了一个更为简单的Cartogram站点,用户只需上传一张图片,系统会自动根据图片色系定义一份特色 ...
高德地图 JS Web 添加自定义图标，自定义窗口标记
高德地图 JS Web 添加自定义图标,自定义窗口标记如何做一个类似这样的地点指示的地图: 线上实例: http://kylebing.cn/tools/map/#/info/car-departm ...
【Qt】QIcon::fromTheme：从系统主题中获取图标
1.简介函数原型 QIcon QIcon::fromTheme(const QString &name) QIcon QIcon::fromTheme(const QString & ...

uni-icons中添加自定义图标

所需工具

制作步骤

uni-icons中添加自定义图标相关推荐

最新文章

热门文章