微信小程序使用阿里iconfont

准备好图标

image.png

打开在线文件

image.png

拷贝的内容至app.wxss文件，最后替换@font-face为在线连接

image.png

完成

@font-face {
    font-family: 'iconfont';  /* project id 1278443 */
    src: url('//at.alicdn.com/t/font_1278443_27uydgd96pk.eot');
    src: url('//at.alicdn.com/t/font_1278443_27uydgd96pk.eot?#iefix') format('embedded-opentype'),
    url('//at.alicdn.com/t/font_1278443_27uydgd96pk.woff2') format('woff2'),
    url('//at.alicdn.com/t/font_1278443_27uydgd96pk.woff') format('woff'),
    url('//at.alicdn.com/t/font_1278443_27uydgd96pk.ttf') format('truetype'),
    url('//at.alicdn.com/t/font_1278443_27uydgd96pk.svg#iconfont') format('svg');
}
.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
.icon-phone:before {
    content: "\e652";
}
.icon-password:before {
    content: "\e62e";
}

如果不能使用在线文件，可以下载字体文件，转base64格式

打开 https://transfonter.org/

image.png

1. 点击Add fonts先添加iconfont.ttf文件
2. 打开Base64 encode
3. 选择要装换的格式，选中WOFF、WOFF2
4. 点击转换convert
5. 装换完成后download
6. 打开下载后的文件stylesheet.css,复制@font-face

完成

@font-face {
    font-family: 'iconfont';
    src: url(data:application/font-woff2;charset=utf-8;base64,d09GMgABAAAAAAScAA0AAAAACagAAARGAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGh4GVgCCYhEICoY8hSoLEgABNgIkAxgEIAWFCAdgGx0IUVRP2mQ/DnIy6lNCPIWybFHeAm7QytncLH7i4b/9/rfPzLn3zTdNpkApYhVP/1XEQn6NRYLE6qT6K1WjSQn3KqfuJSzJVoECzCpSABENBX52+qJvikw4UYokCX/a0DHTZYJV2tQGdKv0SIxsHk6gQG4W9ZX2/lwh9Pqov6BnKvmEBl4KAR865Rp8eXLWiw8dmMU6UIRqJCQKIsUbHeVVeQ+8hp+P/zSjUXSVuPTmg4eeQP3aZV4nw8Qpj8AmcFMx60YEeWoO8je4XARmNUX+2iVDlTbzYQDk1wV+CJzABCoQQZaJnqBIFBT/ngBPNYYBCmhgEVgBUYgxAAmAUFUj3QaanVmkLYtf48p+iVi8cpZG8EfQupZSF6UJjtrF/GVBTqJ7OW1FjsbZsFKwJBCAMZlWbLYNi2XNYHhZ6j5LuIrQWyfQNxniHG3Mh+QOW4qzneUJGOofZ58UHDFH5R0wVNRvCRiqls9kWnkQ+f2CnHRe87kuhjAgtOMCNnkqzNV0pkMrGEjr928YkMMBRzRYhHf1Acxb4YABGEOoeITZLLPyGSIhlUkoYKelsWxZLOt6QYJIELHNsubOf0xjMq24GIx4lgmZermZCzHu5nNdJ3p+f9oAThb0QWWvs++Yqb2+dXMFC2nL+YtmK1Srlq5WK0VhJgJr4PLhv8sj5+RkZ56JkpP1vP0TdSnDzImAOGT9LfUbshZhoJlOf/P28SPuUm7M8AbVOlAFuwy/jB8j1x75P/NHYSM/vtuYuyCL4GALYKDgYLjLWxcU3dQYxRHN0dgIx4AD6vX1aBSnsYXNrpobmxnH4cc1X93FTLHd1dd0EIBcHxQtbm5vZh8HC82vZF/L/z2u/GT8KQbgkVVm1U3GzmX5GvZSXjjr8X0Za1cgNQTyGAavkb8neq4AAzgANft5AIPCr5T6NitrRB0iioi2VVDI2ncFEYtN11vyh/K3XCtCeXgPeXlCXc5fkEgESDQByJeI345yiCAy+idT/uN8pDqpAeoAIAAEwHS2zaULafzPTMPTOnW25WGS6gRNAcHaMk+CnNnUzEdKJJdQ7FyzCgjNGC8omDaNAcCyL7x7jTL2NkJzFwLFyHMIVM1LAVLzToDOjDNAoNd8BQSmXYjLEJixEm9VkVM4Dzx+WHSPX8wb86tFUcjElvI76wb4vUUn/Gn3/Vw94yhewFwRzoubSEPckzh3cfJ+PIQI5j0hEsb08xPVNqb6z/5whWyQvBvgNi8+ogRyEw7+ktdu/vZZ+fu8hIvgVylOgyp1cL0eX0NVvSzyhjm4fNNp3idCNB+aIkXyJs5buBBBxD2qw+4lUAmFEBea/BV/XjxEUgWvZpIjon00IyO9L+Sq95BV52LdH5udAI+aD4QypIYO827YqcqjSyvcLlm9S6sOHPq9axTTJLJtCSVK1Mjoou/PBib85GBROdLY+E4R/fi5yMx9aAAAAA==) format('woff2'),
        url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAbMAA0AAAAACagAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGsAAAABoAAAAciDWtFUdERUYAAAaQAAAAHgAAAB4AKQAOT1MvMgAAAZwAAABCAAAAVjyPSERjbWFwAAAB+AAAAFQAAAFizIC2n2dhc3AAAAaIAAAACAAAAAj//wADZ2x5ZgAAAmAAAAKMAAADPKEVLmpoZWFkAAABMAAAADAAAAA2FcLKCWhoZWEAAAFgAAAAHAAAACQH3gOFaG10eAAAAeAAAAAXAAAAGAxSAVpsb2NhAAACTAAAABIAAAASAnoBkm1heHAAAAF8AAAAHwAAACABGQBpbmFtZQAABOwAAAFJAAACiCnmEVVwb3N0AAAGOAAAAE0AAABgsxrE8XjaY2BkYGAAYrNpkfvi+W2+MnCzMIDATY/DbHBa6H8DCwNzA5DLwcAEEgUAFVIJinjaY2BkYGBu+N/AEMPCAAJAkpEBFbAAAEcKAm142mNgZGBg4GCIZWBnAAEmIOYCQgaG/2A+AwAS2AGDAHjaY2BkYWCcwMDKwMDUyXSGgYGhH0IzvmYwYuQAijKwMjNgBQFprikMDs8UnwUxN/xvYIhhbmBoAAozguQA44gMTgAAeNpjYYAAFgh2ZHBgiGQQYjgAAAekAbkAeNpjYGBgZoBgGQZGBhCIAfIYwXwWBgcgzcPAwcDEwPJM8ZnqM71nJs+C/v9nYEDmST6SvC95XfKS5FaoCXDAyMYAF2JkAhJMDGgKGIY9AADWYxSVAAAAAAAAAAAAMABeAKwBNAGeAAB42m1SzWsTURCfmWcTEN2wu9luS2zSzaZJICaYr42laZOAkCgVYyxdbaXppaJtoV40tJdGehD0Ipb2Vo96VfDeKCoIvepJoXj3T9hdJynVi8O++c3MzpuZNzOAUPM+iENRgRAAGmEM+vyGLGE0npCNDBaskiHPYG5YpypWQ7FYyO1hzIqh2+srWB0o+D/bwBsEVL2e6IkqAJwDnXOYYdRnsJTBhIToFxL6NaOYQYJj2m63t2nA8afn3Von0aV1Wj41MncPPfDOb9nHx/YWx77jPRFvRBcCcAEy/fo5mszxDU4gZxA1kyNz+WH0+dW+nOinM4v8m71E0nlrNRAbFjUH6H5/EAmppWslNRT51aKNubkNukmvHncOBElUt9yHVh2xbuELq+6+3tlRq/VUql5V8XabPdm/3WZXcdAB8IPifT0D4ipEIAtFmIQKNOEuwIQxaG2/FrNo8tNNzTytOmcV4lxuKa/liwaffBjH0NDzmqnxmWBeNLlxUYmCYcrNUCEuOMzJY7iZR+47dQRFFsvpVsV9WmmlpxGn03hDkmW3gyNqq4KblZYy6khLP5joUeVg6WVscWWxEY83TuBbc41ordlcJVqt6Qpufk5NYpkJJ1POR5blUZnuKzouMKGuPNsrd8r7++Xn0Vjsir1sXzkB9wutzM6u0IDz6GEIel5XdAezisBFuAw1NvKGJXi9Srx3Oi8dSqjJweHT8SVU7lXByhu5YU1C8VcJ+jCM/V5FffTbvTc1TzQ/hbs1m9FNJXK5BO4ms4jZ5LLzPiDLAZoNyEPy2X+K5u6hccngr0t2jY76V+2aU6jZ4hOWkk4hWUJGOmJ00soYX5MUWpDHFJad66Pj41nD+AM4EbDJeNp9kD1OAzEQhZ/zByQSQiCoXVEA2vyUKRMp9Ailo0g23pBo1155nUg5AS0VB6DlGByAGyDRcgpelkmTImvt6PObmeexAZzjGwr/3yXuhBWO8ShcwREy4Sr1F+Ea+V24jhY+hRvUf4SbuFUD4RYu1BsdVO2Eu5vSbcsKZxgIV3CKJ+Eq9ZVwjfwqXMcVPoQb1L+EmxjjV7iFa2WpDOFhMEFgnEFjig3jAjEcLJIyBtahOfRmEsxMTzd6ETubOBso71dilwMeaDnngCntPbdmvkon/mDLgdSYbh4FS7YpjS4idCgbXyyc1d2oc7D9nu22tNi/a4E1x+xRDWzU/D3bM9JIbAyvkJI18jK3pBJTj2hrrPG7ZynW814IiU68y/SIx5o0dTr3bmniwOLn8owcfbS5kj33qBw+Y1kIeb/dTsQgil2GP5PYcRkAAAB42mNgYoAALjDJyIAOOMCiTIxMjMyMLIysjGxsyUWpiSWp3KXFqUW6yal5JalFHAWJxcXl+UUp3IkFBfmZeSW5QGHWgoz8vFQAlxkReAAAAAAAAAH//wACAAEAAAAMAAAAFgAAAAIAAQADAAcAAQAEAAAAAgAAAAB42mNgYGBkAIKrS9Q5QPRNj8NsMBoAOysFfgAA) format('woff');
    font-weight: normal;
    font-style: normal;
}
.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
.icon-phone:before {
    content: "\e652";
}
.icon-password:before {
    content: "\e62e";
}