1.普通使用阿里icon
日常開發(fā)中會使用到很多圖標(biāo)活喊。一般我們使用阿里icon搜囱;下面就記錄一下;
image.png
1.選擇一個自己需要的icon 加入購物車以舒;
在右上角點(diǎn)擊購物車按鈕
image.png
2.再次點(diǎn)擊添加至項目
image.png
3.點(diǎn)擊下載至本地;
然后解壓壓縮包:
image.png
4.將這個文件里面的代碼 復(fù)制出來霎肯;
新建一個
ifonfont.wxss
文件擎颖,吧剛才復(fù)制出來的代碼粘貼進(jìn)去;image.png
5.還需要做的是观游。在我們app.wxss
里面引入肠仪;
image.png
就可以啦;
怎么使用呢 就是在wxml里面
<icon class='iconfont icon-triangle-right' />
就可以啦~
2.使用彩色的icon
使用了普通顏色的icon 备典,但是還有彩色的一些圖標(biāo) 使用就有一點(diǎn)細(xì)微的差別了异旧;但是也很簡單;
需要使用一個第三方庫iconfont-tools
首先執(zhí)行命令
npm i -g iconfont-tools
然后到我們剛才下載的文件下面:
image.png
切換到這個目錄下面提佣;
cd project/asset/font_hiytajitqeu // 進(jìn)入圖標(biāo)文件所在文件夾
然后執(zhí)行
iconfont-tools // 生成小程序?qū)S梦募?
控制界面會是這樣勾笆;
image.png
這樣一頓操作后會得到一個文件夾:
image.png
右側(cè)的iconfont-weapp-icon.wxss
就是我們彩色的圖標(biāo)樣式啦缤削;
和上面一樣 在app.js中引入就可以了阅茶;這邊介紹了党觅;
tip:
需要注意的是 使用這個圖標(biāo) 就不再是上面的代碼了
image.png
需要修改一下下
<icon class='t-icon k-t-icon-jiantou-copy-copy' />
就要就結(jié)束了~
gh_af88ca3ac9c4_430.jpg