小程式中使用字型圖示

原文連結---微信小程式使用字型圖示

一、下載字型圖示

首先進入Iconfont-阿里巴巴向量圖示庫 ，然後搜尋自己想要的圖示 下面以小程式圖示為例（我比較懶就直接一張圖解決，嘿嘿）

1. 搜尋小程式圖示

2. 點選新增入庫

3. 點選右上角購物車圖示

4. 點選下載程式碼按鈕

下載解壓後目錄如下：

二、轉換ttf檔案（重點來了）

1. 進入transfonter平臺，具體操作步驟如下：

   

下載後檔案目錄如下，其中重點部分就是stylesheet.css

三、在小程式中使用

1. 開啟stylesheet.css，把裡面的所有內容拷貝到app.wxss

1. 開啟先前在Iconfont-阿里巴巴向量圖示庫 下載的檔案，找到iconfont.css並開啟復制如下程式碼（上面的都不用管，我們只需要帶有偽類選擇器:before的所有CSS）到app.wxss

注：我這裡都是拷貝到app.wxss，你們別都學我直接拷貝（畢竟這裡就一個圖示），也可以用@import引入

1. 在index.wxml中使用，推薦使用text標籤然後新增相應的class類名 使用方式就跟在html中用字型圖示一樣：通過font-size改變大小，color改變顏色

注：圖為練手小程式，如果你想看播放器還是看這裡吧 Gayhub 地址 掘金地址