使用矢量字體自定義小程序icon組件圖標(biāo)的示例

小編給大家分享一下使用矢量字體自定義小程序icon組件圖標(biāo)的示例，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

一個問題

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

一個想法

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

一個概念

什么是矢量字體？

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

要使用矢量字體，就要涉及到一個非常有用的網(wǎng)站：Iconfont-阿里巴巴矢量圖標(biāo)庫。這個網(wǎng)站不僅提供圖標(biāo)下載，還提供自定義矢量圖標(biāo)的生成和下載。接下來我會結(jié)合豐富的截圖來一步步看如何使用矢量字體自定義小程序 icon 組件圖標(biāo)。

一個實踐

獲取矢量圖標(biāo)

打開 Iconfont-阿里巴巴矢量圖標(biāo)庫 網(wǎng)站，其首頁如下圖：

因為這里我們不關(guān)心圖標(biāo)長什么樣子，只關(guān)心如何一步步的從矢量圖標(biāo)生成到微信小程序代碼來自定義 icon 組件圖標(biāo)。所以我們直接選擇第一個圖標(biāo)合集，點擊后如下圖。

然后點擊第一個圖標(biāo)庫，其詳情如下。這里我們把鼠標(biāo)放到第三個圖標(biāo)——咖啡豆圖標(biāo)上面，會出現(xiàn)三個按鈕，分別是加入購物車、收藏、下載。我們需要點擊加入購物車按鈕。

此時右上角的購物會有紅色的角標(biāo)，點擊一下右上角的按鈕出現(xiàn)以下界面。

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

添加項目后，網(wǎng)頁會自動跳轉(zhuǎn)到項目詳情界面。此界面包含了剛剛添加進(jìn)來的圖標(biāo)。

此時我們點擊中間的“查看在線鏈接”按鈕，會生成一系列代碼，并在網(wǎng)頁中間顯示。此時我們在 iconfont.cn 的任務(wù)就已經(jīng)完成，我們已經(jīng)拿到了我們想要的圖標(biāo)遠(yuǎn)程鏈接和 Unicode 值。其中剛剛生成的代碼就是圖標(biāo)的遠(yuǎn)程鏈接，咖啡豆圖標(biāo)下邊的  字樣就是圖標(biāo)對應(yīng)的 Unicode 值。這兩個內(nèi)容在下邊編寫微信小程序代碼時會用到。

微信小程序代碼編寫

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

WXSS 代碼

其中要注意的是，在 iconfont 中復(fù)制的 font-face 代碼是直接粘貼到 WXSS 中的?？Х榷箞D片的 Unicode   把前邊的 &#x 轉(zhuǎn)為 \ 即可，然后將其放到 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;
}復(fù)制代碼

WXML 代碼

<icon class="iconfont icon-coffee"></icon>復(fù)制代碼

以上是“使用矢量字體自定義小程序icon組件圖標(biāo)的示例”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！