當(dāng)前位置:首頁 > IT技術(shù) > 微信平臺(tái) > 正文

前端必知:微信小程序如何引入阿里圖標(biāo)
2021-08-10 17:35:33

在我們開發(fā)微信小程序的過程中,經(jīng)常會(huì)用到各種小圖標(biāo)。為了節(jié)省資源空間,以及便利性,我們通常會(huì)使用字體圖標(biāo),今天就記錄一下具體要怎么實(shí)現(xiàn)?

尋找圖標(biāo)

(1)打開并注冊(cè)阿里圖庫,找到自己需要的圖標(biāo)添加到庫
前端必知:微信小程序如何引入阿里圖標(biāo)_css
(2)將圖標(biāo)加入到自己的項(xiàng)目
前端必知:微信小程序如何引入阿里圖標(biāo)_字體圖標(biāo)_02
前端必知:微信小程序如何引入阿里圖標(biāo)_css_03

前端必知:微信小程序如何引入阿里圖標(biāo)_css_04

(3)點(diǎn)擊查看在線鏈接,將代碼粘貼保存到自己的項(xiàng)目中。
前端必知:微信小程序如何引入阿里圖標(biāo)_小圖標(biāo)_05

在小程序中使用圖標(biāo)

(1)在我們的項(xiàng)目中新建文件,將復(fù)制的圖標(biāo)代碼粘過來并命名。
前端必知:微信小程序如何引入阿里圖標(biāo)_微信小程序_06
(2)在需要使用圖標(biāo)的頁面中引入字體圖標(biāo)文件
前端必知:微信小程序如何引入阿里圖標(biāo)_微信小程序_07
(3)圖標(biāo)實(shí)現(xiàn)
前端必知:微信小程序如何引入阿里圖標(biāo)_微信小程序_08
前端必知:微信小程序如何引入阿里圖標(biāo)_字體圖標(biāo)_09
當(dāng)然阿里圖庫提供了三種字體圖標(biāo)的使用方法,我分享的是我個(gè)人覺得比較簡單好用的方法,如果對(duì)其他方法感興趣可以根據(jù)官方的指導(dǎo)去實(shí)現(xiàn)一下。

?

本文摘自 :https://blog.51cto.com/u

開通會(huì)員,享受整站包年服務(wù)立即開通 >