Study notes-how to use font icons in uni-app

---

When developing with uni-app, font icons are sometimes used to make the page more beautiful. The Ali icon library is mainly used here.

1. Download and put the font icon in the project:

 You can download it directly from the Ali font icon library.

 

Put the six files in the decompressed file into the project. Generally placed in the static folder

 

2. Modify the iconfont.css file:

Cannot be used directly, you need to configure it first. Add ~@/static/font/ in front of iconfont

 

 3. Use font icons globally:

If you want to use the font icon in the entire project, you need to import it in App.vue

<style>
    @import url('static/font/iconfont.css');
<style>

Pit: A separator must be added at the end of the introduction sentence; otherwise, the font icon may not be displayed.

4. Use font icons in the navigation bar of the app:

You can go to the uni-app official website to see, there is in the framework part.

It can be configured in page.json, it mainly needs to import the iconfont file ending with ttf

"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页",
				"enablePullDownRefresh": true,
				"app-plus": {
					"titleNView": {
						"buttons": [{
							"type": "none",
							"float": "right",
							"text": "\ue615 退出",
							"fontSize": "12px",
							"fontSrc": "/static/font/iconfont.ttf",
							"width": "60px"
						}, {
							"type": "none",
							"float": "left",
							"text": "检查更新",
							"fontSize": "12px",
							"width": "60px"
						}],
						"autoBackButton": false
					}
				}
				
			}

 

---

The above are some methods of using font icons in uni-app.