微信小程序引入阿里巴巴彩色图标字体（Symbol）

步骤一：在微信小程序开发者工具的工作的根目录打开cmd，输入

npm install mini-program-iconfont-cli --save-dev

步骤二：输入命令，生成iconfont.json文件

npx iconfont-init

步骤三：将彩色图标添加入购物车，然后添加至你的项目

步骤四：更新代码后复制粘贴到iconfont.json的"symbol_url"

步骤五:iconfont.json:

{"symbol_url": "//at.alicdn.com/t/font_2891912_m2ov2xg8c2p.js","save_dir": "./iconfont","use_rpx": false,"trim_icon_prefix": "icon","default_icon_size": 18
}

步骤六：输入命令生成icon文件夹（当你的阿里巴巴图标库中添加进新图标时，每次必须更新代码
js，修改iconfont.json的"symbol_url"，并且重复执行步骤六）

npx iconfont-wechat

步骤七：app.json中引入iconfont组件

{"usingComponents": {"iconfont": "/iconfont/iconfont"},

步骤八：在你需要的页面的wxml中引入彩色图标（name为图标字体库中的Font Class / Symbol，其中class属性可以自己修改样式）

<iconfont size="22" name="wangguan" class="icon"></iconfont>

效果图：

微信小程序引入阿里巴巴彩色图标字体（Symbol）相关推荐

微信小程序引入iconfont彩色图标
小程序引用iconfont前两种不支持彩色,必须使用symbol,使用方法如下: 引用方法名支持多色兼容性 unicode × 好 font-class × 良好 symbol √ 差 1.小程序 ...
微信小程序引入阿里巴巴图标库（不下载）
微信小程序引入阿里巴巴图标库(不下载)@TOC 阿里图标地址:https://www.iconfont.cn 第一步:选择资源管理-我的项目-选择Font class-查看在线链接-点击下方css链接 ...
微信小程序引入阿里巴巴图标库
微信小程序引入阿里巴巴图标库在阿里巴巴图标库下载需要的图标,得到iconfont.wxss文件. 将iconfont.wxss文件放在style目录下. 在app.wxss引入,页面里面添加代码 @ ...
微信小程序使用阿里彩色图标
微信小程序使用阿里彩色图标首先全局安装 iconfont-tools 1.先windows+R打开cmd命令窗口 2.输入npm i -g iconfont-tools 3.下载自己要使用的彩色图标 ...
微信小程序引入外部矢量图标（阿里巴巴矢量图标）
1.显示效果 2.实现步骤进入阿里巴巴矢量图标库搜索想要的矢量图标并加入购物车,点击右上角购物车将图标添加至项目更改项目设置将字体格式设置为TTF Base64 点击下载至本地在微信小程序 ...
微信小程序使用 iconfont 彩色图标(mini-program-iconfont-cli)
把 iconfont 图标批量转换成多个平台小程序的组件.不依赖字体,支持多色彩. 0 支持平台微信小程序支付宝小程序百度小程序头条小程序(字节跳动) 快手小程序 QQ小程序 1 安装插件 n ...
微信小程序引入iconfont单色图标实例
进入https://www.iconfont.cn/官网, 搜索目标图标,图标类型为"单色图标" 将需要的图标添加到购物车,点击购物车将图标添加至相应的目标项目中打开目标项目,下 ...
微信小程序引入iconfont单色图标实例(Unicode方式)
进入https://www.iconfont.cn/官网, 搜索目标图标,图标类型为"单色图标" 将需要的图标添加到购物车,点击购物车将图标添加至相应的目标项目中打开目标项目,下 ...
微信小程序引入iconfont单色图标实例(Font class方式)
进入https://www.iconfont.cn/官网, 搜索目标图标,图标类型为"单色图标" 将需要的图标添加到购物车,点击购物车将图标添加至相应的目标项目中 4. 在小程序项 ...

微信小程序引入阿里巴巴彩色图标字体（Symbol）

微信小程序引入阿里巴巴彩色图标字体（Symbol）相关推荐

最新文章

热门文章