微信小程序開發(fā) | 如何在小程序中使用自定義 icon 圖標
題圖 m.eeefficiency.com
本文是微信小程序開發(fā)學習筆記。
微信小程序 icon 組件(標簽)只提供 9 型圖標,不能滿足開發(fā)或設計的個性化需求。為了解決這個問題,我們可以使用定制的 icon 圖標,豐富原圖標類型。
在微信小程序中使用自定義 icon 圖標有 6 種方法:
1.使用 icon 圖標(特指位圖)
2. 微信(精靈圖)
3.使用 CSS 風格繪制(這種方法工作量大)
4.使用矢量字體
5.使用 SVG 矢量文件
6.使用 微信
這篇文章只解釋了第 4 的方法,因為我暫時不除了第 1 的方法。
使用矢量字體來自定義 icon 圖標,需要阿里巴巴圖標庫網站 微信。
題外話,我一直認為這個網站只能用于設計,直到我接觸到一些前端知識,我才知道它也可以用于編程。
打開網站,選擇你最喜歡的圖標,添加到購物車中,將商品添加到購物車中,重復操作,并將你最喜歡的圖標添加到購物車中。
選擇所有需要的圖標后,單擊右上角「購物車」圖標。
瀏覽器右側會彈出面板,選擇「添加至項目」,如果你以前沒有創(chuàng)建過一個項目,你需要在這里建立一個新的項目。新項目實際上是一個新的文件夾。
將鼠標移動到網頁頂部的導航欄上「圖標管理」,單擊彈出菜單「我的項目」。
點擊我的項目「查看在線鏈接」。
下面會有一長串代碼,其中 url 鏈接指向的就是存放在阿里云服務器的矢量字體,這些字體有不同的格式,如 ttf、woff、woff2.為了兼容不同的設備或系統(tǒng),需要使用不同的字體格式。
接著點擊「點此 ** 代碼」,將代碼 ** 進入系統(tǒng)剪貼板。
回到微信小程序開發(fā)者工具,將代碼粘貼到小程序頁面 wxss 文件中,wxss 文件可以類比為普通網頁 css 文件。
接著在 wxss進一步定義 icon輸入以下代碼:
.微信{ 微信: '微信'; color: red; 微信: 30px;}.微信:微信{ 微信:'e8ab';}.微信:微信{ 微信:'e8ad';}
微信指定我們嵌入的字體名稱,需要與 一起使用@微信中 微信的值保持一致 ,color微信設置圖標的顏色。
微信和 微信是自定義的類選擇器名稱(以下簡稱類名)。你可以根據(jù)自己的喜好來命名。 微信代表愛情圖標,微信代表贊美圖標。
微信指定圖標的 微信編碼需要返回 微信,將鼠標移動到圖標上方,并在彈出菜單中選擇「編輯圖標」。
在打開的頁面中,左下角的 4 位字符——e8ab, 微信編碼為愛心圖標,粘貼到 wxss 文件對應的位置,并在字符前添加反斜杠 。
微信編碼獲得點贊圖標,也需要同樣的操作。
至此,即使完成了 wxss 編輯風格。
為了在小程序中看到圖標的最終渲染效果,我們還需要編輯 wxml 文件,wxml 相當于普通網頁html 文件wxml 中使用 icon輸入以下代碼:
<icon class="微信30334"></icon> <icon class="微信30334"></icon>
這里的 class 屬性值對應 wxss 文件中自定義的類名,通過類名來應用相應的樣式。完成以上所有操作,最終的渲染效果如下:
只是為了得到兩個小圖標。。。似乎得不償失
擴展閱讀:
至少寫一個微信小程序的必要知識
以上,希望有所幫助。
微信小程序開發(fā) | 如何在小程序中使用自定義 icon 圖標 希望這篇文章對您有幫助.
上海西陸信息科技有限公司 承接各類微信小程序開發(fā)制作、小程序定制、APP 網站 開發(fā)制作,聯(lián)系電話 18221533805、15900430334
如果我從非正規(guī)渠道采購,會有什么風險?
采購成品系統(tǒng)代碼一定要正規(guī)渠道嗎
西陸招聘成品系統(tǒng)
西陸房產成品系統(tǒng)
西陸家政成品系統(tǒng)
西陸教育成品系統(tǒng)
西陸二手市場成品系統(tǒng)
西陸旅游成品系統(tǒng)
西陸健身成品系統(tǒng)
短視頻劇本|“瘋狂小楊哥”的爆火之路:人物關系反差
2年漲粉3800萬,零演技網紅——瘋狂小楊哥,為何會如此火?
共享儲物柜小程序APP 必要的功能
小程序 開發(fā)公司 聊應用基礎模塊
生鮮小程序APP要知道什么
房產APP小程序開發(fā)須知
教育類商城系統(tǒng)與教育小程序商城
聊電商APP小程序模塊
教育小程序開發(fā)功能
開發(fā)一款教育小程序,需要哪些基本功能?
聊聊 交友APP 小程序

聯(lián)系我們