uniapp引用iconfont字体图标

一、选好图标后在APP.vue中进行配置

<style lang='scss'>
	/*
		全局公共样式和字体图标
	*/
	@font-face {
		font-family: "iconfont";
		font-weight: normal;
		font-style: normal;
		src: url('https://at.alicdn.com/t/font_2308342_84cfdl9mpt.ttf') format('truetype');
	}
</style>

主要是src的地址，iconfont上给的是不加https:的，这块需要我们自己给加上，不然在小程序真机的时候会出现不显示的情况

二、添加图标的css，可以外链，我这里直接内嵌进来的

（1）把提供的地址在浏览器打开

（2）复制我们需要的css代码，这里我直接给各位看复制之后的吧

<style lang='scss'>
	/*
		全局公共样式和字体图标
	*/
	@font-face {
		font-family: "iconfont";
		font-weight: normal;
		font-style: normal;
		src: url('https://at.alicdn.com/t/font_2308342_84cfdl9mpt.ttf') format('truetype');
	}
    
	.iconfont {
		font-family: "iconfont" !important;
		font-size: 16px;
		font-style: normal;
		color: #ff0026;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
	
	.icon-shezhi:before {
	  content: "\e648";
	}

	.icon-shangpin:before {
		content: "\e6a4";
	}

	.icon-fangxinjiaoyi:before {
		content: "\e6e8";
	}

	.icon-zhengpinbaozheng:before {
		content: "\e6f4";
	}

	.icon-qitianwuliyoutuihuan:before {
		content: "\e63d";
	}

	.icon-48xiaoshi:before {
		content: "\e765";
	}

	.icon-weixinzhifu:before {
		content: "\e60c";
	}
</style>

三、页面上的使用

<text class="iconfont icon-fangxinjiaoyi" ></text>

哪里不清楚我们可以在评论区探讨，欢迎大家评论转发！