Use Ali icon in uniapp

Article directory

foreword

In the process of using uniappthe development project, the use of icons can be said to be a daily operation, even 80% of the pages will be used, and if the ui framework is used, the framework itself will also have its own icons, but these icons are very Difficult to meet the demand, the following is the use of the Ali icon.

Find the icon you need

insert image description here

Add the icons you need to the shopping cart or bookmark them
Click on the shopping cart icon in the upper right corner to add the selected icon to the item
You need to log in here, you can Baidu by yourself

Download to local

insert image description here

After downloading locally

insert image description here

You can click demo_index.htmlto view, there are usage methods inside.

used in the page

Copy all the downloaded files to the project. It is recommended to put them static/iconfontin the folder. You can copy all of them, or just copy iconfont.cssand iconfont.ttftwo files.

Create a local css file

common/cssCreate a file under the file , font-icon.cssthis is to configure and reference Ali's icon, the code is as follows:
Copy the contents of iconfont.css into this file, just copy the style below .iconfont, and the import above does not need to be copied.
There may be some searched by small partners that need to be added https, but now the official has processed it, so it is not necessary. If you cannot access it, you can add it at the end.

@font-face {
    
    
  font-family: uniicons;
  font-weight: normal;
  font-style: normal;
  src:url('~@/static/iconfont/iconfont.ttf') format('truetype'); 
}

.icon {
    
    
  color: #999;
  font-family: uniicons;
  font-size: 42upx;
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  display: inline-block;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
}

// 下面的内容，把iconfont.css里的内容复制过来，复制 .iconfont 下面的样式即可。

Introduced in app.vue

insert image description here

page use

demo_index.htmlThere are corresponding icons to use in
Just replace demo_index.htmlthe class in the page with , because you define this in , and you can also use the same name or customize the name in order to distinguish it.iconfonticonfont-icon.css

<span class="icon">&#xe8c4;</span>
<span class="icon icon-xxx"></span>

Use in the navigation bar

Select the icon and download it locally without creating a css file to import it, just use it directly.
The use of the navigation bar is also the same, just follow the uniapp official website.
It’s just that the online part also said that it was added at the place where it was introduced https. It should be the previous version https.
textThe value of in the code can be found in , just demo_index.htmlreplace the previous symbol with , remember that there is no semicolon behind\u

"app-plus": {
    
    
	"titleNView": {
    
    
		"buttons": [{
    
    
				"text": "\ue600",
				"fontSrc": "/static/iconfont/iconfont.ttf",
				"float": "right",
				"key": 1
			},
			{
    
    
				"text": "\ue648",
				"fontSrc": "/static/iconfont/iconfont.ttf",
				"float": "right",
				"key": 2
			}
		]
	}
}

summary

Although the article is relatively long, it is not as concise as others, but the usage process is like this, so it is convenient for everyone to customize various icons
How to use, in fact, there are official websites, please pay attention to develop according to the official
This article is to guide and sort out, there are many ways, everyone thinks it is applicable