亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

利用微信小程序制作屬于自己的Icon圖標(biāo)

 更新時(shí)間：2022年04月07日 08:23:33   作者：暢飲無(wú)緒  
項(xiàng)目中常常需要使用到字體圖標(biāo),微信小程序中使用字體圖標(biāo)與在平常的web前端中類(lèi)似但是又有區(qū)別,下面這篇文章主要給大家介紹了關(guān)于利用微信小程序制作屬于自己的Icon圖標(biāo)的相關(guān)資料,需要的朋友可以參考下

前言

最近在接手一個(gè)微信小程序，發(fā)現(xiàn)里面的圖標(biāo)都是使用的image組件，看起來(lái)非常別扭，加載也不太順暢。

就想著看看微信有沒(méi)有類(lèi)似自帶的圖標(biāo)庫(kù)可以使用。

有是有，就是太少了，翻來(lái)翻去好像也就 8 種，不太夠用啊。

官方?jīng)]有就只能自己做了，還是阿里的iconfont好使，首先你得有iconfont的賬號(hào)。

1、將你心儀的圖標(biāo)加入購(gòu)物車(chē)

2、將圖標(biāo)添加至項(xiàng)目

點(diǎn)擊右上角倒數(shù)第三個(gè)圖標(biāo)進(jìn)入購(gòu)物車(chē)，然后將購(gòu)物車(chē)添加到我們的項(xiàng)目中，沒(méi)有項(xiàng)目可以自行創(chuàng)建。

3、我的項(xiàng)目

進(jìn)入到我的項(xiàng)目可以看到我們剛剛加入的圖標(biāo)，我的項(xiàng)目在最上方的資源管理 — 我的項(xiàng)目。

4、將項(xiàng)目下載至本地

解壓后你會(huì)看到如下文件

5、將字體轉(zhuǎn)換為base64

進(jìn)入網(wǎng)站：https://transfonter.org/ ，找到文件中的 iconfont.ttf 字體文件，將字體文件轉(zhuǎn)換為 base64。

記得開(kāi)啟第2步的 Base64 encode。

下載并解壓后你將會(huì)獲得如下的文件

6、樣式文件修改

同時(shí)打開(kāi)第 4 步下載解壓的 iconfont.css文件和第 5 步，下載解壓的stylesheet.css文件。

我們先看confont.css文件，紅圈中的代碼直接刪除

再打開(kāi)stylesheet.css文件，將紅圈中的代碼復(fù)制到confont.css文件中去

7、重命名

給confont.css重命名為 xxx.wxss，并放到微信小程序項(xiàng)目中去，注意：后綴必須是wxss

8、導(dǎo)入樣式文件并使用

在app.wxss中導(dǎo)入我們的 xxx.wxss，我們生成的 icon 圖標(biāo)就可以在項(xiàng)目中使用了。

<view class="iconfont icon-bianji"></view>

至此，我們自定義的Icon圖標(biāo)就制作完成了

總結(jié)

到此這篇關(guān)于利用微信小程序制作屬于自己的Icon圖標(biāo)的文章就介紹到這了,更多相關(guān)微信小程序 Icon圖標(biāo)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論