1、首先在阿里巴巴向量相簿裡建立專案並新增圖示進去

2、在微信小程式中新建.wxss檔案(如:iconfont.wxss)

  

   

    
     
    
    
     
      @font-face {
     
    
   

    
     
    
    
     
        font-family: 'iconfont';  /* project id 534266 */
     
    
   

    
     
    
    
     
        src: url('//at.alicdn.com/t/font_534266_fu7g2hnf57ncow29.eot');
     
    
 

   

    
     
    
    
     
        src: url('//at.alicdn.com/t/font_534266_fu7g2hnf57ncow29.eot?#iefix') format('embedded-opentype'),
     
    
   

    
     
    
    
     
        url('//at.alicdn.com/t/font_534266_fu7g2hnf57ncow29.woff') format('woff'),
     
    
   

    
     
    
    
     
        url('//at.alicdn.com/t/font_534266_fu7g2hnf57ncow29.ttf') format('truetype'),
     
    
 

   

    
     
    
    
     
        url('//at.alicdn.com/t/font_534266_fu7g2hnf57ncow29.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-tongxunlu:before { content: "\e623"}
     
    
   

    
     
    
    
     
      .icon-sousuo:before{content: "\e63b"}
     
    
   

    
     
    
    
     
      .icon-delete:before {content: "\e617"}
     
    
   

    
     
    
    
     
      .icon-edit:before {content: "\e648"}
     
    
  
  

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

4、在頁面中使用

<view class="iconfont icon-delete"></view>
  

5、為什麼不用@import "https://at.alicdn.com/t/font_534266_fu7g2hnf57ncow29.css"方式匯入

由於微信小程式當前這個版本使用@import語句可以匯入外聯樣式表，但是@import後跟需要匯入的外聯樣式表的相對路徑，用;表示語句結束。不可以用絕對路徑。

在這裡我們可以用此方法匯入是因為src屬性可以寫絕對路徑，比如我們在<image>標籤中的src也是可以用絕對路徑的