在uniapp里面iconfont-阿里巴巴矢量图标库

https://www.iconfont.cn/search/index?searchType=icon&page=1&fromCollection=-1

上面是官方的网站

uniapp项目里面图标的使用步骤：

1.选择想要的图标下载

2.设置好想要的样式下载到需要的项目里面

3.在项目里面直接使用

uniapp项目里面字体库的使用步骤：

1.选择想要的字体下载

2.具体步骤

3.字体包放的位置

4.如何引用

1，

2.

3.

5.最终效果

6.整个页面的代码

<template>
	<view class="register">
		<image src="../../static/shangchang.png" calt="描述图片内容" class="slogan-image" />
		<div class="slogan">这也太好逛了吧</div>
		<div class="button-container">
			<button class="download-buttonnn" @click="upload">立即下载APP</button>
			<div class="additional-text">点击按钮下载app进入商城查看更多精彩...</div>
		</div>
		<view :class="!show?'back back-common':'back-common'">
			<view class="text">
			    <ul>
			        <li>1、请点击右上方三个点</li>
			        <li>2、选择在浏览器打开</li>
			        <li>3、进行青禾家App下载</li>
			        <li>4、您是通过微信注册的，您的密码为本次输入手机后六位</li>
			    </ul>
			</view>
		</view>
	</view>
</template>
<script>
	import common from '../../common/common.js';
	export default {
		data() {
			return {
				message: "",
				show: false, //遮罩层
				optionReferralCode: "" //和邀请码有关
			}
		},
		onLoad(option) {
			let ua = navigator.userAgent.toLowerCase();
			//微信
			if (ua.match(/MicroMessenger/i) == "micromessenger") {
				this.show = true;
			} else { //浏览器
				this.show = false;
			}
		},
		mounted() {
			common.hidePageHeadInWechat();
		},
		methods: {
			upload() {
				let a = uni.getStorageSync('updateLoad');
				a = JSON.parse(a);
				let downloadUrl = 'https://qy-static.umeng.top/' + a;
				// 判断是否在浏览器中打开
				if (typeof window !== 'undefined' && window.navigator && window.navigator.userAgent) {
					// 在浏览器中打开，直接跳转下载链接
					location.href = downloadUrl;
				} else {
					// 不在浏览器中打开，复制链接到剪贴板
					uni.setClipboardData({
						data: downloadUrl,
						success() {
							uni.showToast({
								title: '下载链接已复制，请在浏览器中粘贴下载',
								icon: 'none'
							});
						}
					});
				}
			},

		}
	}
</script>
<style lang="less">
	// @theme-color: #FF9800;
	/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
	@font-face {
		font-family: "阿里妈妈东方大楷 Regular";
		font-weight: 400;
		src: url("//at.alicdn.com/wf/webfont/gkXc3IA5RjCq/3afRRdezDo08.woff2") format("woff2"),
			url("//at.alicdn.com/wf/webfont/gkXc3IA5RjCq/fr2u37m2L3AI.woff") format("woff");
		font-display: swap;
	}
	.register {
		margin: 40rpx 20rpx;

		.back {
			display: none;
		}
	.back-common {
	    position: fixed;
	    top: 0;
	    left: 0;
	    right: 0;
	    bottom: 0;
	    background-color: rgba(0, 0, 0, 0.6);
	    width: 100%;
	    .text {
	        padding-top: 300rpx !important; /* 调整这个值以改变距离顶部的距离 */
	        list-style-type: none; 
	        padding: 0; 
	        margin: 0 auto; 
	        display: flex; 
	        flex-direction: column; 
	        align-items: center; 
	        color: #FFFFFF; 
	        font-size: 40rpx; 
	    }
	    .text li {
	        text-align: left;
	        width: 90%;
	        padding-left: 30rpx;
	        margin-bottom: 10rpx;
	        word-wrap: break-word;
	    }
	}
		.slogan {
			font-family: "阿里妈妈东方大楷 Regular", sans-serif;/* 应用字体 */
			font-size: 70rpx;/* 大号字体 */
			color: #ffcd05;/* 鲜艳的颜色 */
			text-align: center;/* 文字居中 */
			text-shadow: 1rpx 1rpx 4rpx rgba(0, 0, 0, 0.2);/* 柔和的文字阴影 */
			margin-top: 80rpx;/* 在图片和文字之间添加一些空间 */
		}
		.slogan-image {
			display: block;/* 确保图片是块级元素 */
			margin: 0 auto;	/* 水平居中 */
			width: 130rpx;
			height: 130rpx;
			margin-top: 170rpx;/* 顶部边距，根据需要调整 */
		}
	}
	.button-container {
		display: flex;
		flex-direction: column;/* 改为列布局 */
		align-items: center;/* 使子元素在水平方向上居中对齐 */
	}
	.download-buttonnn {
		font-weight: bold;/* 使字体加粗 */
		margin-top: 400rpx;
		font-size: 50rpx;/* 设置字体大小 */
		padding: 40rpx 80rpx 60rpx 80rpx;/* 设置内边距，使按钮更大，更易点击 */
		background-color: #FFFFFF;/* 使用主题颜色作为按钮背景色 */
		color: #ffaa00;/* 设置字体颜色为白色 */
		border: none;/* 移除边框 */
		border: 7rpx solid #ffaa00;/* 添加白色边框 */
		border-radius: 50rpx;/* 设置边角圆润 */
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.2);/* 添加轻微的阴影效果 */
		text-align: center;/* 确保文本居中 */
		line-height: 1;/* 调整行高以适应按钮高度 */
		transition: background-color 0.3s;/* 添加渐变效果使按钮在点击时更具交互性 */
	}
	.additional-text {
		margin-top: 20rpx;
		font-size: 30rpx;/* 较小的字体大小 */
		color: #666;/* 较淡的字体颜色 */
		text-align: center;/* 文本居中 */
		margin-top: 20rpx;/* 在按钮和文本之间添加一些空间 */
	}
</style>