前言

icon 可以直接下載圖片格式然後使用，這也是最簡單的方式，但是小程式中的專案大小有限制的，所以這些圖示圖片再佔用空間的話或許就顯得不太合適了，這裡就記錄一種把 icon 的樣式引入專案中的使用方法。

一、新增圖示到專案（向量庫專案）

1、進入 icon 向量庫新增自己想要使用的圖示到購物車（可多個一起新增）

點選到 icon 向量庫網站
網址：https://www.iconfont.cn/

2、點選購物車選擇新增至專案，然後確定

二、拷貝程式碼到本地

1、進入我的專案，點選生成程式碼

2、複製相應的程式碼

訪問連線後複製程式碼

3、貼上到本地小程式專案中

所有程式碼：

@font-face {font-family: "iconfont";
  src: url('//at.alicdn.com/t/font_1966194_76rbfn21qf5.eot?t=1595646068052'); /* IE9 */
  src: url('//at.alicdn.com/t/font_1966194_76rbfn21qf5.eot?t=1595646068052#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAPkAAsAAAAAB9AAAAOYAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqDKIMIATYCJAMMCwgABCAFhG0HRxvfBlGUDUqe7GuMjaHVkzZCYlbNQksLgpAqAAunvDh+/XxCd0Qn3j69XEgSwTJgCfHwNfa/c3f3m0hiiKZRVKNZIkH7Q4iUoMlDYejiicqbuvmDX/BbQ+SzBMayX1yUcUTZX1Y41sqcA/qN6kGjvCJUaIcdUJeuOyQgL/HEuHyqA26SkpTo9vP13UJaXAmPkvb328TkOpXI0bJotkld/iwidauL1uqTUJDSRt4pZTfDDSClP+6dNqbYfG3LaazFc/unLsA4oEDH3hpoURaQN4xdeRHTCdQbFoAbDren4iiMeoG4mCW+4qTMSk12qBWqS7oW8USV2vQofaR47H8+flqEQ1KVGU23nt5HyurL+DiyCgddFMl4TrBeZCwCCnG41L2XHoYWYfWK2qhPrlaENJa3cuCLVW31Sv94iahmZDaCWRhOfJm0+QRfvoQlnP+3VKMe9/FmhNcjq9lIX119XVt9R13dsce2m/c9uO6C5bADXKLkAZFU/1vq00WWfpHvf48DXzh9YixdMZHzSOTnHKdmMFDPI1bplX/C9eE+r/foOzA7k3vsPlP5MUX5GzyI+cD7XlvHVeJ5HlLWYRgBxQACR+7pGNdgtHwyjT448njqui1q9172QiD6Ywnigkv7h9jk1VN/yGWixG3roGEPEbrBDah47datNmI1OeNLNkLMxs5oxFYuX4D67Lb5Tc/axSBwWc/EVRAIPmEudi/OoZP+v/LsYzD1VinarTU3vub6f739/bv9NiKoak92YtLO3gpCXiFUEPfsn5eNT0j+urLXvRFDMjlVz3BtaxQAUDmXV/y83zj6fHjdlhX/atEFfF77uvVrVBT5HmpvzRP8KknLvKLqYE2RxbZYj2Y72C9CCIVc4wflQru9v7ardSahVlcMSY0hyGpNogt+Eao0WA7Vaq2Geguy3g06SLoodZg3AQitZkiavYSs1YIu+A2qdPuhWmvoUG93dAzZYDqy/npGXzCC4g99SHVs2aQfZN8x6UqfkzKf8kZuMy+kk1k2esQaeYwW6pMstMTQMFXAwGxYlgScKcdQJp1Is4yncdmFJiVVSt96DPkEioDCH+iFSC12i4t+7v13KNEp+bgGURF8Q6yVlQ9SkaQF+qiuWyGuZRflI7GgiRhoMFIBDDhRaYYI4OWVcigkJroegcZSjAo1bdWT+bXV8y2BesaZcqTIUXRc+6VRk22pCrIao0fqN2ivDUPqalEU') format('woff2'),
  url('//at.alicdn.com/t/font_1966194_76rbfn21qf5.woff?t=1595646068052') format('woff'),
  url('//at.alicdn.com/t/font_1966194_76rbfn21qf5.ttf?t=1595646068052') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('//at.alicdn.com/t/font_1966194_76rbfn21qf5.svg?t=1595646068052#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-xxhdpiCombinedShape:before {
  content: "\e624";
}

.icon-Account:before {
  content: "\e6e6";
}

 

三、使用 icon

1、新建 text 標籤來接收 icon 圖示,並填寫相應的 class 即可

<view>
  <text class="lk-font icon-xxhdpiCombinedShape"></text>
</view>

2、效果圖

總結

方法有很多，這種稍微複雜了些，但是也是一種方法，在此記錄，以備不時之需。