Wechat applet uses color font icon (transcript)

How do wechat applets use color font icons

1. Select the corresponding icon in Alibaba vector icon library , Add to your own project , Download to local
   

2. adopt npm Global import iconfont-tools Tools , grammar ：npm i -g iconfont-tools

3. Again iconfont-tools // Generate applet specific files （ You can choose a name or use the default name , Using the default name is always enter）

4. Get the following file directory structure ,iconfont-weapp Is the applet color icon file
   

5. hold iconfont-weapp in css Copy files to project , stay app.vue Global import in iconfont-weapp In the document iconfont-weapp-icon.css The style file
   @import url('./static/font/iconfont-weapp/iconfont-weapp-icon.css'); // Color icons

6. Use

<text class="t-icon t-icon-jiagepaixu" style="width: 20rpx;height: 20rpx;" />

Cannot pass font-size Set size , Only use width、height Set icon size
t-icon yes iconfont-weapp-icon.css The initial style defined in （ The name can certainly be changed ）,t-icon-jiagepaixu The back section of the middle can be here and iconfont-weapp-icon.css View in ,（ Only iconfont-weapp-icon.css Some of them can be used as color icons ,demo_index.html Just for reference ）

design sketch

It is not difficult for wechat applet to use font icons , Writing this article is mainly to take notes , I'm afraid I'll forget later