Use Alibaba icon in uniapp

Preface

In the use of uniapp In the process of developing the project , The use of icons can be said to be daily operations , Even 80% of the pages will use , And if you use ui Frame words , The frame itself will also have its own icon , However, these icons are difficult to meet the demand , The following is the use of Alibaba icon .

Find the icon you need

• Add the icons you need to use to the shopping cart or collect them
• Click on the shopping cart icon in the upper right corner , Add the selected icon to the project
• You need to log in , You can baidu yourself

Download to local

After downloading to local

• You can click on the demo_index.html see , There are ways to use .

Page usage

Copy all the downloaded files into the project , It is recommended to put it in the folder static/iconfont Next , You can copy all , You can also copy only iconfont.css and iconfont.ttf Two documents .

To create local css file

• stay common/css Create under file font-icon.css file , This is to configure and reference Alibaba's icon , The code is as follows ：
• hold iconfont.css Copy the contents of this file , Copy .iconfont The following style is enough , The above introduction does not need to be copied .
• Some friends may need to add https , But now the authorities have handled it , So there's no need to , If you can't visit, please add at last .

@font-face {
    
  font-family: uniicons;
  font-weight: normal;
  font-style: normal;
  src:url('[email protected]/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;
}

//  The following , hold iconfont.css Copy the contents in , Copy  .iconfont  The following style is enough .

app.vue Introduction in

Page using

• demo_index.html There are corresponding icons in
• Use... In the page demo_index.html Inside class iconfont Switch to icon that will do , Because you are font-icon.css The definition is called this , In order to distinguish, you can also use the same or customized name .

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

Used in the navigation bar

• Select the icon , Download to local without creating css File to introduce , It can be used directly .
• The use of the navigation bar is the same , Follow uniapp Just come to the official website .
• But the online part is also added to the introduction https, That should be the previous version , Not now , Debug and use according to normal steps , Finally, it can't be used , Try adding https The way to .
• In the code text Value , stay demo_index.html Can be found in , Replace the previous symbol with \u that will do , Remember that there is no semicolon behind

"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 long , It's not as simple as others , However, the use process is like this , It is also convenient for you to customize various icons
• How to use it , In fact, there are official websites , Please note that the development is still based on the official
• This article is to guide and comb , There are many ways , If you think it is applicable