uni-app中使用阿里巴巴矢量图标库

1、打开网址，链接： 阿里巴巴矢量图标库

2、注册账号并登录，已有账号直接登录

3、选择图标，点击添加入库

4、点击购物车图标，查看添加入库的图标

5、点击“添加至项目”，可以选择将图标添加至已有项目中，或添加至新创建项目中。

6、添加成功后，进入项目详情页面，可以看到当前项目所包含的所有图标。

注意： 添加新图标至项目后，需要点击”更新代码“。并将更新后的代码重新下载，导入项目中。

7、下载代码至本地

8、找到下载的压缩包，解压缩后复制 iconfont.css 文件到uniapp项目的common文件夹中（若没有该文件夹，可以新建一个）

9、去到项目中复制代码，然后打开iconfont.css文件，替换@font-face中的内容。并且在//at前加上https:。

替换前iconfont.css内容：

@font-face {
  font-family: "iconfont"; /* Project id 2555092 */
  src: url('iconfont.woff2?t=1621316808304') format('woff2'),
       url('iconfont.woff?t=1621316808304') format('woff'),
       url('iconfont.ttf?t=1621316808304') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-fanchuan:before {
  content: "\e603";
}

.icon-daohang:before {
  content: "\e602";
}

替换后iconfont.css内容：

@font-face {
  font-family: 'iconfont';  /* Project id 2555092 */
  src: url('https://at.alicdn.com/t/font_2555092_gyq0zm29y5.woff2?t=1621316773774') format('woff2'),
       url('https://at.alicdn.com/t/font_2555092_gyq0zm29y5.woff?t=1621316773774') format('woff'),
       url('https://at.alicdn.com/t/font_2555092_gyq0zm29y5.ttf?t=1621316773774') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-fanchuan:before {
  content: "\e603";
}

.icon-daohang:before {
  content: "\e602";
}

10、iconfont.css中添加以下内容（目的：使得图标可以被应用于text、view、button等组件）

text[class*="icon-"],
view[class*="icon-"],
button[class*="icon-"] {
    font-family: "iconfont";
    font-size: inherit;
    font-style: normal;
}

11、项目中引用，可全局引用（App.vue的style标签中引用）、局部引用（在具体的.vue文件中的style标签中引用）。推荐：全局引用方式 。

12、页面中使用图标(第15行)

flex3_zonghe.vue

<!-- 
	综合练习：
		回顾Flex流式布局的基础语法以及CSS编写规范
 -->
<template>
	<view class="container">
		<view class="swipper">
			<image src="../../static/hongzao.jpg" mode="aspectFill"></image>
		</view>
		<view class="title">
			<view class="tl">
				<button>出售</button>
				<text>新疆大枣</text>
				<!-- <text class="xingxing icon-xing"></text> -->
				<text class="xingxing icon-fanchuan"></text>
			</view>
			<view class="des">
				高端品质，无敌质量!
			</view>
		</view>
		<view class="detail">
			<view class="danjia">
				<text>预售单价:</text>
				<text>1.99元/公斤</text>
			</view>
			<view class="chanliang">
				<text>预计总产量:</text>
				<text>500/公斤</text>
			</view>
			<view class="address">
				<text>地址:</text>
				<text>江苏省苏州市吴中区</text>
			</view>
		</view>
		
		<view class="share">
			<text class="icon-fenxiang1">分享</text>
			<text class="icon-haibaofenxiang">立即分享</text>
			<text class="icon-haibaofenxiang">生成海报</text>
		</view>
		
		<view class="footer">
			<view class="left">
				<text>受关注:</text>
				<text>200次</text>
			</view>
			<view class="right">
				<text class="icon-sixin1">私信他</text><text class="icon-sixin">联系他</text>
			</view>
		</view>
	</view>
</template>

<script>
	
</script>

<style lang="less" scoped>
	@margin: 5px;
	@width: 50%;
	.container {
		display: flex;
		flex-direction: column;
		margin: 10px;
		font-size: 18px;
		color: #333;
		.swipper {
			text-align: center;
			image {
				width: 100%;
			}
		}
		.title {
			.tl {
				display: flex;
				text-align: left;
				button {
					margin: 5px;
					font-size: 12px;
					color: #fff;
					border-radius: 15px;
					background-color: #18B566;
				}
				text {
					margin-top: 5px;
					font-weight: 700;
				}
				.xingxing {
					position: absolute;
					right: 20px;
				}
				
			}
			.des {
				margin-left: @margin;
			}
			
		}
		.detail {
			display: flex;
			flex-flow: row wrap;
			justify-content: space-between;
			margin: @margin;
			.danjia {
				// flex: 0 0 50%;
				width: @width;//这一行代码的作用与上一行相同
				margin: @margin 0;
				text:nth-child(2) {
					color: #f00;
				}
			}
			.chanliang {
				width: @width;
				margin: @margin 0;
			}
			.address {
				margin: @margin 0;
			}
		}
		.share {
			display: flex;
			flex-flow: row wrap;
			justify-content: space-around;
			color: #7CC8B5;
			height: 50px;
			line-height: 50px;
			background-color: #E6FBF4;
		}
		.footer {
			display: flex;
			flex-flow: row wrap;
			justify-content: space-between;
			margin-top: 60px;
			padding: 0 10px;
			color: #fff;
			height: 50px;
			line-height: 50px;
			background-color: #1FC094;
			.right {
				text:nth-child(1) {
					padding-right: 10px;
					border-right: 2px solid #89E4CF;
				}
				text:nth-child(2) {
					padding-left: 10px;
				}
			}
			
		}
	}
	
</style>

示例图：