一、选好图标后在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字体来丰富你的界面啦！！
觉得有帮助的朋友，可以一键三连哦
