一、symbol
1.搭建環境(在項目根目錄打開cmd窗口)
npm init -y
這時根目錄會多出一個package.json文件
2.mini-program-iconfont-cli(PS:一種適合小程序的多色解決方案)
npm install mini-program-iconfont-cli --save-dev
提示有個高危漏洞,不管它,要管它的話可以執行npm audit fix或npm audit
這時會生成node_modules的文件夾
3.生成配置文件
npx iconfont init
這時根目錄會多出一個iconfont.json文件
4.生成iconfont文件夾
npx iconfont-wechat
這時會多出一個 iconfont文件夾,這個是為小程序生成的組件
5.打開iconfont.json配置文件,修改symbol_url的值
復制//at.alicdn.com/t/font_1872838_n9eme2nws4k.js的值放到下面的圖位置
6.組件在全局引用
"usingComponents": { "iconfont": "./iconfont/iconfont" }
7.終於可以開始用了(name的值是要去掉icon的)
二、unicode(沒有彩色的,就算有彩色的也會變灰色)
1.下載代碼,解壓
2.直接復制iconfont.css的代碼到xxx.wxss
3.在頁面引入(在全局引入會比較好,我這里使用單個頁面引入)
<view class="iconfont icon-weixin"></view>
原本是彩色的,出來就變成黑色的了
