當前位置:網站首頁>使用矢量字體自定義小程序-icon-組件圖標

使用矢量字體自定義小程序-icon-組件圖標

2022-01-26 23:41:44 QinGeneral

一個問題

微信小程序中的 icon 組件只有 9 種類型 success、success_no_circle、info、warn、waiting、cancel、download、search、clear。具體可以參考 icon 組件官方文檔

一個想法

我們往往希望不受上述 9 種圖標的限制,拓展 icon 組件的圖標。這就涉及到如何自定義圖標的問題。自定義圖標有多種方法,比如使用圖片、精靈圖、CSS 樣式繪制、SVG 矢量文件等方法。本文著重介紹如何使用矢量字體自定義小程序的 icon 組件圖標。

一個概念

什麼是矢量字體?

字體包括點陣字體和矢量字體。矢量字體目前用的比較廣泛,分為三類:Adobe 的 Type1、Apple 和 Microsoft 主導的 TrueType、Adobe Apple Microsoft 共同主導的開源字體 OpenType。對於矢量字體,每個 Unicode 是編碼的索引,每個字符的描述信息是一個幾何矢量繪圖描述信息。矢量字體是實時繪制出來的,所以可以實時填充任何顏色,可以無級縮放而沒有鋸齒。

要使用矢量字體,就要涉及到一個非常有用的網站:Iconfont-阿裏巴巴矢量圖標庫。這個網站不僅提供圖標下載,還提供自定義矢量圖標的生成和下載。接下來我會結合豐富的截圖來一步步看如何使用矢量字體自定義小程序 icon 組件圖標。

一個實踐

獲取矢量圖標

打開 Iconfont-阿裏巴巴矢量圖標庫 網站,其首頁如下圖:
網站首頁

因為這裏我們不關心圖標長什麼樣子,只關心如何一步步的從矢量圖標生成到微信小程序代碼來自定義 icon 組件圖標。所以我們直接選擇第一個圖標合集,點擊後如下圖。

QH 徐小花圖標庫

然後點擊第一個圖標庫,其詳情如下。這裏我們把鼠標放到第三個圖標——咖啡豆圖標上面,會出現三個按鈕,分別是加入購物車、收藏、下載。我們需要點擊加入購物車按鈕。

QH 徐小花的茶與咖啡圖標庫

此時右上角的購物會有紅色的角標,點擊一下右上角的按鈕出現以下界面。

購物車

然後我們點擊“添加至項目”按鈕,會彈出以下界面。如果沒有項目就新建一個,如果有的話直接選擇一個你認為合適的界面即可。這裏我提前新建了 Test 項目,直接選擇 Test 項目。

加入項目

添加項目後,網頁會自動跳轉到項目詳情界面。此界面包含了剛剛添加進來的圖標。

項目詳情頁面

此時我們點擊中間的“查看在線鏈接”按鈕,會生成一系列代碼,並在網頁中間顯示。此時我們在 iconfont.cn 的任務就已經完成,我們已經拿到了我們想要的圖標遠程鏈接和 Unicode 值。其中剛剛生成的代碼就是圖標的遠程鏈接,咖啡豆圖標下邊的  字樣就是圖標對應的 Unicode 值。這兩個內容在下邊編寫微信小程序代碼時會用到。

生成在線代碼

微信小程序代碼編寫

微信小程序的代碼編寫就比較容易了,首先編寫 WXSS 文件,將剛剛拿到的遠程字體鏈接直接粘貼到 WXSS 中,然後編寫自定義的 iconfont 樣式,最後在 icon 組件中引用即可。其代碼如下:

WXSS 代碼

其中要注意的是,在 iconfont 中複制的 font-face 代碼是直接粘貼到 WXSS 中的。咖啡豆圖片的 Unicode  把前邊的 &#x 轉為 \ 即可,然後將其放到 icon-coffee 的 content 中。

@font-face {
    
  font-family: 'iconfont';  /* project id 1834535 */
  src: url('//at.alicdn.com/t/font_1834535_c5751gpcjt.eot');
  src: url('//at.alicdn.com/t/font_1834535_c5751gpcjt.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_1834535_c5751gpcjt.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_1834535_c5751gpcjt.woff') format('woff'),
  url('//at.alicdn.com/t/font_1834535_c5751gpcjt.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_1834535_c5751gpcjt.svg#iconfont') format('svg');
}

.iconfont {
    
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-coffee:before {
    
  content: "\e634";
  color: darkgoldenrod;
  font-size: 70px;
}

WXML 代碼

<icon class="iconfont icon-coffee"></icon>

運行效果

運行效果

至此,使用矢量字體自定義小程序 icon 組件圖標的流程就介紹完了。如果你有什麼疑問,歡迎討論。

特別說明

本文受極客時間上《微信小程序全棧開發實戰》第七課的影響而寫,在學習第七課時,不知道其中的 font-face 是如何來的,所以自己搜索一番,結合第七課部分筆記總結成此篇文章。

本文只是個人的筆記總結,分享出來給大家,希望有所幫助。

參考資料

  1. 《微信小程序全棧開發實戰》第七課·極客時間
  2. iconfont——幫助中心——代碼應用

版權聲明

本文發布於簡書,搜索作者 QinGeneral
同步發於CSDN博客,搜索作者 QinGeneral
同步發於微信公眾號:AndroidRain
無需授權即可轉載,甚至無需保留以上版權聲明;
轉載時請務必注明作者。

掃碼關注微信公眾號
掃碼關注微信公眾號

版權聲明
本文為[QinGeneral]所創,轉載請帶上原文鏈接,感謝
https://cht.chowdera.com/2022/01/202201262341440435.html

隨機推薦