上篇我們已經成功填加tabBar,那麼我們這篇就講解一下 引用圖示icon，小程式裡有自己的圖示供大家使用，但是圖示有限，有很多都滿足不了我們的需求。這次呢 給大家介紹一下阿里圖示，裡面有大量的圖示供你選擇，

下面我就給大家介紹兩種引用icon的方法 ， 引用小程式自帶icon 和 引用阿里圖示

一、引用小程式自帶icon

下面我給大家寫一個最簡單的icon引用列子：程式碼如下：

<view >
    <icon type="success" size="40"/>
</view>

結果如下：

所有實現如下：

小程式icon屬性 如下圖：

上面就簡單的實現了引用小程式自帶 icon

二、引用阿里圖示

① 首先 先新建一個空目錄 ，名字隨意，看懂就行，主要用來放iconfont.wxss,如下圖：

沒有登入的同學登入一下阿里圖示

第一步：選擇自己需要的icon如下圖：

第二步：加入購物車

想要選擇哪個圖示 就如下圖加入購物車

選多少都可以,選完以後，點選如下圖的購物車

第三步：新增至專案

點選後接著 如下圖：

新增專案 如果沒有專案就新建一個，新增完如下圖：

第四步：下載 

接下來點選  按鈕，下載完開啟 如下圖：

第五步：下載上圖 iconfont.css 放在剛開始新建的空目錄中，如下圖：

第六步：給 iconfont.css 改名為  iconfont.wxss  如下圖：

並在app.wxss中引入iconfont.wxss 如下圖：

注：如果不引用，最後阿里圖示將不顯示

第七步：開啟阿里圖示 點選後如下圖：

複製內容後

第八步：開啟iconfont.wxss 修改 @font-face 裡的內容

把你在上圖複製的內容，複製完 把 iconfont.wxss 裡@font-face 裡的內容 替換後 程式碼如下：

第九步：頁面簡單引用，程式碼如下;

<!--pages/test/test.wxml-->
<!-- 引用小程式自帶icon -->
<view >
    <icon type="success" size="40"/>
</view>

<!-- 引用阿里圖示 -->
<view>
   <text class="iconfont icon-timer" style='font-size:100rpx;color:orange'></text>
   <text class="iconfont icon-edit" style='font-size:100rpx;color:lightBlue'></text>
   <text class="iconfont icon-letter" style='font-size:100rpx;color:lightGreen'></text>
   <text class="iconfont icon-mobile" style='font-size:100rpx;color:pink'></text>
</view>
 

程式碼解釋如下：

第十步：效果如下：

寫到這就結束了，希望大家可以靈活應用在專案裡呦~~ ，也希望大家多多反饋，我寫的比較詳細，希望大家不要嫌太囉嗦 呼呼~