小程序入坑（一）---如何引入iconfont 字體圖標

最近一直忙於平常任務，實際上是懶癌又犯了。。。。。。。。。。不過由於本身的「懶癌」，「不思進取」給本身挖了很多坑。

一，小程序工具的安裝

 打開簡易小程序的官網https://mp.weixin.qq.com/debug/wxadoc/dev/,，點擊 導航欄裏的「工具「-》點擊「微信開發者工具」，如圖：

進入下載開發工具頁面，而後根據本身的電腦配置選擇相應的壓縮包。

2、建立一個本身的項目

一、安裝好「微信開發工具」==》雙擊打開，掃碼進入==》調試類型選擇「本地小程序項目」==》點擊「添加項目」==》點擊「無APPID」（博主是本身練手開發的，沒有APPID），填寫「項目名稱」，選擇「項目的保存路徑」。

二、微信有一套適用於本身的ui組件，效果網站：https://weui.io/文檔說明網站：https://github.com/Tencent/weui/wiki(費了老大的勁才找到，就不能寫在一塊兒嗎？)。你們能夠下載下來用，不過值得注意的是，也是我第一次入坑的地方，demo是HTML的標籤，而小程序支持的標籤倒是「view，image，text,icon」等這些。是否是瞬間有點心痛的感受。。。

你們能夠點擊「組件」，看看小程序支持哪些標籤。

3、引入多色字體圖標

一、搜索「http://www.iconfont.cn」，點擊「幫助"==>"代碼應用"==>「web端使用」。

　　你們能夠看到3種引入教程：「unicode」，「font-class」，「symbol」，三種引用，這裏又有一個深坑等着你們。前兩種形式的應用只能使字體顯示單一顏色，如圖：

 

而最後一種卻可使小圖標使用多色，如圖：。

　　若是你們要作一個帶圖片的導航切換，而且選中時的圖片是彩色的，用「symbol」這種方式是否是很很方便，不用切圖，不用使用css spring 一點一點的調位置，只須要引入字體圖標就行。理想是否是很美好。現實倒是，使用「symbol」這種方式是使用"svg"的方式。如：

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>

而程序不支持「svg」的渲染。。。。忍痛割愛啊，只能使用老方法啦。。。。。。。。。

二，引入單色字體圖標

　　既然小程序不支持「多色」字體圖標的引入，支持普通的字體圖標也是好的。按照官方文檔的第二種方式（原諒我不喜歡第一種方式），

寫上本身須要的小圖標的類名，如：

<i class="iconfont icon-error"></i>

頁面上應該顯示這樣的圖標啊，然而沒有。。。。

不得已只能本身在樣式文件裏寫上：

.icon-error{
   content: "\e6b2";
   font-size:30px;
}

3、如何獲得字體圖標的Unicode(16進制)

一、將鼠標浮到要使用的圖標上，出現如圖：

二、點擊「鉛筆」式的按鈕，進入編輯頁面，如圖：

紅色箭頭指向部分，就是該圖標的16進制，固然你也能夠在這裏編輯這個圖標的樣式。