1、去阿里圖標(biāo)庫選擇我們需要的圖標(biāo)并下載下來
貼一個(gè)阿里圖標(biāo)庫的地址：iconfont-阿里巴巴矢量圖標(biāo)庫
沒有項(xiàng)目的自己創(chuàng)建一個(gè)就好了，添加進(jìn)自己的項(xiàng)目里?
?
點(diǎn)擊第三步的鏈接打開后就是這樣的
把里面的內(nèi)容復(fù)制下來
在你微信小程序的項(xiàng)目里新建一個(gè)這樣的文件，?把之前復(fù)制的內(nèi)容粘貼進(jìn)去。
?修改app.wxss文件，import 我們剛才新建的文件
然后我們就可以在任意一個(gè)頁面內(nèi)使用我們的圖標(biāo)了
當(dāng)然你也可以用vant-weapp 組件庫中的 vant-icon 組件。如下?
?如果對vant-weapp組件庫感興趣的話可以去看看
我貼一個(gè)鏈接：介紹 - Vant Weapp (gitee.io)
我教的這個(gè)是用的線上版的，沒有把圖標(biāo)的項(xiàng)目下載到本地。
如果你想下載下來本地使用的話，你需要把 .ttf的文件轉(zhuǎn)換成base64格式。因?yàn)樾〕绦虿恢С?.ttf文件的格式。
第一步：先把圖標(biāo)的項(xiàng)目下載下來并且解壓，接下來就是把 .ttf文件的格式轉(zhuǎn)換一下
第二步：轉(zhuǎn)換格式，貼一個(gè)地址用于轉(zhuǎn)換格式：Online @font-face generator — Transfonter
?
?第三步：轉(zhuǎn)換玩后下載下來
把下載下來的文件解壓出來，紅框是我解壓出來的文件
?第四步：在微信小程序中新建一個(gè)文件，步驟跟上面使用在線地址一樣。這是我的目錄和文件名
?然后把轉(zhuǎn)換后的stylesheet.css文件的內(nèi)容全部復(fù)制到我們新建的iconfont.wxss文件里
再把我們下載的并且解壓出來的圖標(biāo)項(xiàng)目中的iconfont.css文件打開復(fù)制里面的內(nèi)容到我們新建的iconfont.wxss里，除了框住的不要，其他都要
這是我復(fù)制粘貼完后的iconfont.wxss文件
第五步：修改app.wxss文件，跟上面使用在線地址的方式一樣。
? ? ? ? ? ? ? ? 在頁面使用的的方式也是跟在線地址的方式一樣
文章來源：http://www.zghlxwxcb.cn/news/detail-697008.html
ok，到這里兩種使用阿里圖標(biāo)庫的方法已經(jīng)講完了。如果還有什么問題，就趕快去百度，問我的話可能回復(fù)不及時(shí)。文章來源地址http://www.zghlxwxcb.cn/news/detail-697008.html
到了這里，關(guān)于微信小程序使用自定義圖標(biāo)，使用阿里圖標(biāo)庫教程的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
