uni-app微信小程序使用iconfont支持颜色自定义

App.vue

<style lang="scss">
	/*每个页面公共css */
	@import './static/iconfont/iconfont.css';

	page {
		background-color: #F0F0F0;
	}
</style>

iconfont网址下载压缩包

iconfont.css

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

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

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

.icon-yiwenshuoming:before {
  content: "\e693";
}

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

.icon-yewuziyuantuopu:before {
  content: "\ea6f";
}

.icon-nibianqi1:before {
  content: "\e608";
}

.icon-dianbiao1:before {
  content: "\e69e";
}

.icon-ditu2:before {
  content: "\e60a";
}

.icon-weixing:before {
  content: "\e606";
}

.icon-shuaxin:before {
  content: "\ec08";
}

.icon-lingdang:before {
  content: "\e8c0";
}

.icon-liebiao:before {
  content: "\e664";
}

.icon-liebiao1:before {
  content: "\e624";
}

.icon-nibianqi:before {
  content: "\e63c";
}

.icon-dianbiao:before {
  content: "\e636";
}

.icon-shishishuju:before {
  content: "\e61b";
}

.icon-history:before {
  content: "\e66d";
}

.icon-a-22jichushuju:before {
  content: "\e65d";
}

.icon-PC:before {
  content: "\e641";
}

.icon-delete:before {
  content: "\e615";
}

.icon-xiangxia:before {
  content: "\e684";
}

.icon-sharpicons_trees:before {
  content: "\e7b2";
}

.icon-chatou:before {
  content: "\e61a";
}

.icon-kuangshan:before {
  content: "\e628";
}

.icon-eryanghuatan:before {
  content: "\e661";
}

.icon-guangfu:before {
  content: "\e662";
}

.icon-xiangzuojiantou:before {
  content: "\e660";
}

.icon-xitongrizhi:before {
  content: "\e663";
}

.icon-weizhi:before {
  content: "\e60b";
}

.icon-filter:before {
  content: "\e686";
}

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

.icon-lvzhou_gailan:before {
  content: "\e63b";
}

.icon-jiesuan:before {
  content: "\e63f";
}

.icon-wodedamaijihuo:before {
  content: "\e656";
}

.icon-shouye:before {
  content: "\e8c6";
}

.icon-qingchu:before {
  content: "\e713";
}

.icon-shenhezhong:before {
  content: "\e601";
}

.icon-weixin:before {
  content: "\e600";
}

.icon-shenfenzheng:before {
  content: "\e614";
}

.icon-24gf-portraitMaleInfo2:before {
  content: "\eb29";
}

.icon-xiangxiazhanhang:before {
  content: "\ec0b";
}

.icon-xiangshangzhanhang:before {
  content: "\ec0c";
}

.icon-xiangyoujiantou:before {
  content: "\e65f";
}