18221533805
      微信小程序開發(fā) | 如何在小程序中使用自定義 icon 圖標
      上海微信小程序開發(fā)制作、APP、網站、小程序定制、小程序外包開發(fā)公司

      微信小程序開發(fā) | 如何在小程序中使用自定義 icon 圖標

      2022-06-22

      題圖 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)

      西陸健身成品系統(tǒng)

      短視頻劇本|“瘋狂小楊哥”的爆火之路:人物關系反差

      關注短視頻編劇微信官方賬號,999個精品短劇本,免費領取!滿屏百萬贊的小楊哥短視頻紅人那么多,滿屏百...

      2年漲粉3800萬,零演技網紅——瘋狂小楊哥,為何會如此火?

      共享儲物柜小程序APP 必要的功能

      一、共享儲物柜小程序開發(fā)功能1.自動定位功能:有些商場或展會面積較大,共享儲物柜小程序可以通過定位功...

      小程序 開發(fā)公司 聊應用基礎模塊

      一、主要功能微信小程序功能分為管理員和非管理員功能。系統(tǒng)擁有多個非管理員用戶,管理員用戶僅有一個角色...

      生鮮小程序APP要知道什么

      1授權登錄有利于用戶了解相關促銷活動實現(xiàn)多次訪問,同時在下單支付時直接引用個人信息,不用多次輸入收貨...

      房產APP小程序開發(fā)須知

      1、地理位置  地理位置,用戶可以通過房產APP能在地圖上直接看到房源位置。也能看到房產周邊的環(huán)境,...

      教育類商城系統(tǒng)與教育小程序商城

      聊電商APP小程序模塊

      1、圖文視頻:利用圖文視頻控件,可以對產品進行精美詳細的介紹。2、導航功能:歷史記錄、標簽等等。3、...

      教育小程序開發(fā)功能

      開發(fā)一款教育小程序,需要哪些基本功能?

      聊聊 交友APP 小程序

      交友APP開發(fā)的需求1、實名認證:必須實名制之后才可以使用,確保雙方的權益保障。2、偏好選擇:用戶可...
      主站蜘蛛池模板: 香蕉视频一区二区三区| 国产一区二区三区视频在线观看| 国产一区二区在线视频播放| 久久精品一区二区三区不卡| 日本精品一区二区三区视频| 亚洲一区二区三区免费在线观看| 国产精品一区二区三区99| 国产视频一区二区在线观看| 色窝窝无码一区二区三区| 亚洲乱色熟女一区二区三区丝袜| 国产日韩精品一区二区三区| 国产一区二区三区小说| 日本一区二区三区爆乳| 亚洲午夜精品一区二区公牛电影院| 成人免费一区二区三区| 久久久99精品一区二区| 久久国产精品一区| 成人区人妻精品一区二区不卡网站| 国产SUV精品一区二区88L| 日韩精品一区二区三区不卡| 精品人妻一区二区三区四区| 白丝爆浆18禁一区二区三区| 免费一区二区三区四区五区| 国产成人久久一区二区三区| 国产av一区二区精品久久凹凸| 日韩精品电影一区亚洲| 亚州国产AV一区二区三区伊在| 国产激情精品一区二区三区 | 精品国产一区二区三区不卡| 久久免费精品一区二区| 无码国产精品一区二区免费式芒果| 国产精品亚洲一区二区三区在线| 国模少妇一区二区三区| 亚洲一区二区三区高清| 亚洲熟妇AV一区二区三区宅男| 久久蜜桃精品一区二区三区| 国产精品一区二区香蕉| 国产福利电影一区二区三区,免费久久久久久久精 | 亚洲综合在线成人一区| 高清精品一区二区三区一区| 福利国产微拍广场一区视频在线|