Wechat mini program uses font icon - link introduction

Table of contents

1. Download the font icon

 1. Select the icon you want to add to the shopping cart and add it to the item

2. View project 

3. Generate Online Links 

 4. Copy the generated link and put it in iconfont.jsonEdit

2. Introducing links

1. Download 

2. Generate iconfont.json file

3. Put the generated link in iconfont.json

4. Need to recompile the applet and execute it on the terminal

5. Introduce font icons in app.json

6. Use in the page

 7. Page effect

3. Add new font icons

---

1. Download the font icon

Ali icon library

 1. Select the icon you want to add to the shopping cart and add it to the item

2. View project 

3. Generate Online Links 

 

 

 4. Copy the generated link and put it in iconfont.json

2. Introducing links

WeChat applet terminal

1. Download 

npm install mini-program-iconfont-cli --save-dev

2. Generate iconfont.json file

 npx iconfont-init

3. Put the generated link in iconfont.json

{
    "symbol_url": "//at.alicdn.com/t/c/font_4139719_05pisap1amvb.js",// 在图标库里面生成的链接
    "save_dir": "./iconfont",
    "use_rpx": false,
    "trim_icon_prefix": "icon",
    "default_icon_size": 18
}

4. Need to recompile the applet and execute it on the terminal

Generate fonticon folder

npx iconfont-wechat 

5. Introduce font icons in app.json

"usingComponents": {

    "iconfont": "/iconfont/iconfont",

 },

6. Use in the page

<iconfont size="40" name="icon_1-12"></iconfont>

 The name inside is to set different font icon names

View the name of the font icon

 You can also view the html in the downloaded file

 7. Page effect

3. Add new font icons

1. Add a new font icon and add the icon that needs to be added to the project

 

2. Regenerate the link once and replace the link placed in iconfont.json before the project

3. Recompile the applet and execute it on the terminal

npx iconfont-wechat 

You can use the newly added icon