小程式引入icon

2022-03-29 08:21:15 字數 942 閱讀 3617

方式一:原生圖示

小程式裡原生圖示是通過icon標籤來引入的:

但是原生圖示只有這麼幾個,面對前端妖嬈繁雜的需求是捉襟見肘,遠遠不夠用啊!

方式二:weui圖示元件

裡面有四個檔案:icon.js, icon.json, icon.wxml,icon.wxss

"usingcomponents": ,

在測試頁面增加一段**:

目前一共有81個,這些圖示對本人來說已經夠用了。

那麼我們也需要讓小程式有這樣引入外部資源的能力。

方式三:iconfont圖示

真不是說,阿里的這個圖示庫(www.iconfont.cn)真是給眾多不會搞設計的程式設計師帶來了莫大的福祉(馬雲:這詞是我發明的)。

上面的圖示種類繁多,你想要的都有,更多的還是你想不到的。

在視**件中,我們通過以下方式顯示圖示:

效果圖:

參考:

小程式手機密碼正則及引入icon

class wrap class bgimg logo class userinfo class iconfont iconshouji style font size 42rpx color gray 請輸入手機號 bindinput phone class userinfo class icon...

taro開發小程式引入icon字型庫

阿里巴巴字型庫使用方法 1.進入阿里巴巴字型官網 註冊登入 2.按照如圖所示1 2 3 建立乙個專案 3.在首頁選擇需要的字型新增到購物車,4.在右上角購物車內,將所選圖示新增到專案中 6.在本地專案中引入該樣式即可使用 標籤內直接新增 字型類名和選中的類名 7.建立個公共的樣式檔案styles,然...

微信小程式 icon元件

方法 wxml class icon group class iconfont icon zhiding icon class iconfont icon zuojiantou icon class iconfont icon youjiantou icon class iconfont icon ...