Use the Alibaba vector icon library in the uni-app project, so that the application can switch the overall color style with one click

Use Alibaba vector icon library in uni-app project

Easily make your application more beautiful, achieving uniform icon text style; very useful for making personal applications, saving time spent on design.

Icon find and select

• Log in to the Alibaba vector icon library to create a project, and select the desired icon to add to the project.
  

Download the icon to the local

• Download the project icon and unzip it to find the iconfont.ttf font file package.及使用字体图标，因为可以动态修改图标颜色，很方便；svg彩色图标是好看，但是支持不是很全
  
  

Use in uniapp project

• Copy the iconfont.ttf file to the static directory of the project.
• Make a global reference in the App.vue file in the project root directory:

<style>
/*导入字体图标*/
@font-face {
     
     
	font-family: 'iconfont';
	src: url('~@/static/iconfont.ttf') format('truetype');
}
/*设置字体图标*/
.iconfont {
     
     
	font-family: "iconfont" !important;
	font-size: 1em;
	font-style: normal;
}
</style>

• Feel free to use font icons on the page:如果图标unicode码不清楚可以在阿里图标库中查看或复制
  

<text class="iconfont">&#xe60c;</text>

Benefits of using font icons

1. Compatibility is good, and compatibility issues are basically not considered.
2. The size can be adjusted at will without distortion.
3. The color of the icons can be adjusted at will, which is convenient for various states or styles.

Anything is good, but the exquisite multi-color effect cannot be achieved; if it is recommended for simple office applications, if it is an exquisite and elegant application, consider svg and other formats that support multi-color.