微信小程式：匯入阿里巴巴iconfont作為圖示

阿里巴巴 · 發表 2019-03-31 12:17:44

摘要：前幾周，高中同學找我做微信小程式比賽的前端，儘管我css/js經驗很少，大概有兩次網頁前端的經歷：一次是在高一，（順帶一提，當時的我立志成為新媒體作者或者文藝從業者，並誓不當程式設計師，結果……當時應該還沒有“真香”梗），所以我堅決地拒絕學習css/js，用ps畫了一整張網頁背景，用浮動div...

前幾周，高中同學找我做微信小程式比賽的前端，儘管我css/js經驗很少，大概有兩次網頁前端的經歷：一次是在高一，（順帶一提，當時的我立志成為新媒體作者或者文藝從業者，並誓不當程式設計師，結果……當時應該還沒有“真香”梗），所以我堅決地拒絕學習css/js，用ps畫了一整張網頁背景，用浮動div和熱點區域之類的視覺化工具加上大量的flash動畫組裝起了我覺得還挺好看的網頁……

第二次就是大一暑假跟著廖雪峰的python-web專案，自己改了改用UIKit組裝的前端，也算不上什麼很深入的接觸。

有點扯遠了，總之雖然前端方面菜的很，但畫畫圖示，搞搞排版還是可以的。小組的組長把UI的大致排版給做好了，我尋思著就先匯入些圖示，順便學一下微信小程式的前端跟普通css/js有啥不一樣。之後就照例先百度，然後實踐了一下，過程挺簡單。不過可能因為時間先後的關係，有一些跟網上教程略有不同的地方，之後會講到。

首先在 Iconfont-阿里巴巴向量圖示庫搜尋自己想要的圖示，中英文都有。有些圖示的粗細可能不統一，可以在圖示作者的倉庫裡找一些相同風格的圖示。然後就可以下載程式碼，格式很全，像SVG可以直接用在Android介面資源的設計裡。

將需要的圖示加入購物車

點選下載程式碼

下載好的檔案

其中有用的是 iconfont.css

，這裡就是我實際操作跟網上部落格所說的有些不一樣的地方了。網上部落格介紹說要把iconfont.css裡的內容經過一個網站進行BASE64的轉碼。但可能是網站更新了，iconfont.css重新命名成iconfont.wxss就可以直接在微信小程式裡使用。

直接重新命名就能使用

/* iconfont from https://www.iconfont.cn/*/
/* 通過覆蓋自動生成的BASE64程式碼更新icon列表（大概吧）*/

@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1552055024198'); /* IE9 */
src: url('iconfont.eot?t=1552055024198#iefix') format('embedded-opentype'), /* IE6-IE8 */
/*實際這裡的url很長，為了篇幅美觀就刪減掉了*/
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAmgA...') format('woff2'),
url('iconfont.woff?t=1552055024198') format('woff'),
url('iconfont.ttf?t=1552055024198') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1552055024198#iconfont') format('svg'); /* iOS 4.1- */
}

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

.icon-weibiaoti201:before {
content: "\e60b";
}

.icon-settings:before {
content: "\e7c7";
}

.icon-help:before {
content: "\e625";
}

.icon-team:before {
content: "\e606";
}

.icon-sponsor:before {
content: "\e634";
}

.icon-message:before {
content: "\e64f";
}

.icon-ionc--1:before {
content: "\e501";
}

.icon-analyze:before {
content: "\e621";
}

.icon-submit:before {
content: "\e6b5";
}

.icon-taskmanege:before {
content: "\e6e2";
}

.icon-anonymous:before {
content: "\e615";
}

在app.wxss進行全域性引用，這裡的路徑是直接相對於小程式根目錄的。

@import "pages/iconfont/iconfont.wxss";

然後就能像普通的字型檔案一樣在頁面裡使用了。

<text class="iconfont icon-settings" style="font-size:35rpx"></text>
<text style='margin:0rpx 15rpx'>介面設定</text>

效果

不得不說比起原生安卓，微信小程式這種類React的書寫方式和渲染速度真是太給勁了，安卓的Preview常常會因為自定義View之類的一片灰，全靠腦補和真機測試……希望自己接下來也能堅持學習，拓寬一下視野。

微信小程式：匯入阿里巴巴iconfont作為圖示

您可能也會喜歡…