小程序 · 使用iconfont

1. 使用GitHub或其他账号登录iconfont，将我们需要的字体添加购物车，然后再添加到新建的项目中。

2. 点击Font class选项，查看在线链接,生成代码。

3. 复制生成的代码，在浏览器中打开链接(注意不要复制前面的 // )
   

4. 下载此文件到本地，放置到项目的assets目录下，保存为iconfont.css (可以自己改名字)。也可以复制上面所有代码粘贴到小程序app.wxss中，最后代码如下图。
   
   iconfont.wxss

@font-face {
  font-family: "iconfont"; /* Project id 2825950 */
  src: url('//at.alicdn.com/t/font_2825950_4gcdmu1f116.woff2?t=1634097006346') format('woff2'),
       url('//at.alicdn.com/t/font_2825950_4gcdmu1f116.woff?t=1634097006346') format('woff'),
       url('//at.alicdn.com/t/font_2825950_4gcdmu1f116.ttf?t=1634097006346') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-wanggexingzhuangjiehe:before {
  content: "\e754";
}

.icon-wanggea-icon-xuanze-weixuanbeifen2:before {
  content: "\e753";
}

.icon-wanggeicon-xiaoxi:before {
  content: "\e751";
}

.icon-wanggemail-line:before {
  content: "\e750";
}

.icon-wanggemianxingchanpin:before {
  content: "\e6b8";
}

.icon-wanggea-juxing2:before {
  content: "\e74f";
}

.icon-wanggechangyong_guanbi:before {
  content: "\e6aa";
}

.icon-wanggejuxing1:before {
  content: "\e74e";
}

.icon-wanggeliebiao-bodadianhua:before {
  content: "\e614";
}

.icon-wanggechanggui:before {
  content: "\e74d";
}

.icon-wanggefuzhilianjie:before {
  content: "\e66d";
}

.icon-wanggeicon-bendi-shouye:before {
  content: "\e74c";
}

.icon-wanggejuxing:before {
  content: "\e74a";
}

.icon-wanggeqingkong:before {
  content: "\e74b";
}

.icon-wanggesearch:before {
  content: "\e67d";
}

.icon-wanggeicon2:before {
  content: "\e747";
}

.icon-wanggeicon1:before {
  content: "\e748";
}

.icon-wanggeicon3:before {
  content: "\e749";
}

.icon-wanggea-bianzu2:before {
  content: "\e744";
}

.icon-wanggebianzu:before {
  content: "\e745";
}

.icon-wanggea-bianzu3:before {
  content: "\e746";
}

.icon-wangget-wshequminjing:before {
  content: "\e695";
}

.icon-wanggecunjuweihui:before {
  content: "\e634";
}

.icon-wanggeWGwanggeyuanguanli:before {
  content: "\e6d5";
}

5. 如果我们觉得icon的名字不好看，我们可以自定义每个icon的类名。

/*** icon_back是自定义的类名 ***/
. icon_back::before {
    content: "\e7a5"
}

6. app.wxss中import即可使用

@import './assets/css/iconfont.wxss';

7. 最后在wxml中引用。

/*** 注意类名要对应 ***/
<text class="iconfont icon-wanggeWGwanggeyuanguanli"></text>

注意:
1、该方法只支持单色图标
2、iconfont显示位置有上下偏移问题