微信小程序开发引用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>

这样就可以愉快的使用iconfont字体来丰富你的界面啦！！

觉得有帮助的朋友，可以一键三连哦