1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 微信小程序如何使用阿里巴巴字体图标iconfont?

微信小程序如何使用阿里巴巴字体图标iconfont?

时间:2021-05-11 02:21:49

相关推荐

微信小程序如何使用阿里巴巴字体图标iconfont?

1.从阿里巴巴字体图标库网站下载iconfont字体文件;

2.打开Transfonter字体转换网站,需要将刚刚下载的iconfont文件里面的woff文件转换成base64位编码的文件;

步骤:上传ttf文件→勾选Base64 encode→再下载文件;

3.经过刚刚2个步骤,会得到2个文件夹:

①找到第2个步骤所得的文件夹里面的stylesheet.css文件,复制里面的内容粘贴到app.wxss文件;

②找到第1个步骤所得的文件夹里面的iconfont.css文件,复制除了@font-face之外的其他样式,粘贴放到app.wxss文件;

app.wxss文件内容:

@font-face {font-family: 'iconfont';src: url('data:font/woff2;charset=utf-8;base64,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') format('woff2'),url('data:font/woff;charset=utf-8;base64,d09GRgABAAAAAA24AA0AAAAAE7wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAANnAAAABoAAAAcj88610dERUYAAA18AAAAHgAAAB4AKQAcT1MvMgAAAZwAAABGAAAAYDz1SeBjbWFwAAACGAAAAIMAAAGyTE43hWdhc3AAAA10AAAACAAAAAj//wADZ2x5ZgAAAswAAAjAAAAMSEmf6fdoZWFkAAABMAAAAC8AAAA2HUpXymhoZWEAAAFgAAAAHAAAACQHggOFaG10eAAAAeQAAAAyAAAANA5sBCRsb2NhAAACnAAAAC4AAAAuGp4YJm1heHAAAAF8AAAAHwAAACABJgDKbmFtZQAAC4wAAAFJAAACiCnmEVVwb3N0AAAM2AAAAJkAAADWzssMGnjaY2BkYGAA4ugZy7/F89t8ZeBmYQCBu6KdzxH0/x4WBuZiIJeDgQkkCgBGfQsUAHjaY2BkYGBu+N/AwMDCAAJAkpEBFbAAAD1WAhF42mNgZGBgEGPYx8DGAAJMQMwFhAwM/8F8BgAdtAHxAHjaY2BhYWD8wsDKwMDUyXSGgYGhH0IzvmYwYuQAijKwMjNgBQFprikMB54xPBdkbvjfwBDDfIehASjMiKREgYERAJB7DVEAAHjaY2GAABYI9mVwYGBlaGNQZyhhKGAoYyhnEGW4DpT6w2DPYMdgylDIYMzgBAB9EAadAAB42mNgYGBmgGAZBkYGEFgD5DGC+SwME4C0AhCyMDA8Y3jG9Iz3mdAzpWcaz7Sf2Txze+bxLOhZ7rOGZ+3PBf//h6sQfKb4TP2ZFqYKKWYpJskfkl8ln0s+lnwkeUnypOQJyf2SSyUnS/ZKskBtxwsY2RjgyhiZgAQTugKGYQ8Ak3YyNQAAAAAAAAAAAAAQAEoAcACoAMIBHgF6AZgBtgLEAwIDhgOoA8oEGgRyBUQF+AYkAAB42pVWXYwb1RW+597xjO3Z8d/82bP2eO0Zz6yzu954PLYFu/GG3QQSIPtDs0tIFoFaVAENsIgIJNpCQ2mBtFJ5aBEPoBYBBUEpReKftgpR1KqoqFJLS6jES58qSnkobzSe7bmzGwIPeahnfOece885c+4953xnCJADcDF7Ad4hCULAqem1Lr1CjJLsenjn4YcJYWT35ll2kglEJiZxUKZW98JepxYYmsguRB8/G1mNhsUoHy9A0wcaoeuGjejNRtjAO3rL5U8XX4G+tNhn9C+kQEij7gMaDswU9NC2BKIDdxu56O3c2FQOitTNTVWzw1dzZisL/dxkNRd9Qs1sdTI7PJ0l3Nb3icjupp+RUULQhE2lFBgZ6qdAbNF+CrwBNSmBpuKVqRK9jwQte0hE78cz0ESCz8DpCy81t9Xj9/mbT7MzbA3PC88q7+TxSPOdfI2die58PLoTTjwOJ+CPcGKbQxUikGObn7AfsALqjJAymeWexlv1uvmw56t4tLtg63AroIkYAhGfBuf1vCY65/keKnhwE9zLWHRcSKfTK9GfBVEUoCUkEvBc9FjMGHq5rEcfxfQNWqVCn4k+YEkWfSAkRLqUSEjR10XhJdTAQYTPROFiQaxow79rlW2SntIq3O8N9Pu1/8PvoIe8h/7GAp3zvIj7MGgP7kG/70ukUqnlL/gdNeAGzkQfoa8aGDH9GPf72ejMBf2O/hY7W9ap97nfwwH3G8id5Gl2gh4hGLF+LRgAplgd3bbhKfq6akEmekrBQD+VAevpUTcD6wpn3NE4vned1+WB0Ewwgj70WsDWh/tUS0FpTIl11KVHUBlNcY4rC0TffJ79i62SG8kT5FfkN2ghMEy8gn5vDnqdoAo2SG1R12yYgZ5RxUhpWcjABNQzoGvIi1kQ656PV10S+VJ9GlqAyt2wxcVwYRegsQGYHdxYN5wGj9s2JTSVAQn9tamuiZLZ62NRGWbf64YDbmAOQt9DYzTW90VJrPueGdgUtZx6C1DKRC/QNbSLL4PbMsVUvlhvV01VKpRG5HtyclKuzzhC1hQEKU0FMyM4M/U0E0ey35FLpWSh5ARjpiokS5b8TRRmSZROZA1BhhQktqRTAkrfJysbmemVnanUzpXppHjTmLvjwA63dgufExjgjwm4QkXx6JjTvKLpbrQWcfcHWonWUgvvSrtSaV/MB7aaThXyhppRpVzi0pFmYdR0ZhywdLU15veTmoGcXpIKnrwPq0UtFI2sKqTkxKVysyAVVVwt6b1JwQ95nJHTSqlYdvec47TXusL0wjTrrQZ5Lztb14tF3R04TrDaY0U9pyXlgloUumttWdfUXTXNMLU/TB1YX5qmraX1pdbubRdxwLyi5H2iMJt+SkrEw7zA6EqYB2acHp12EEeYh51thSKwAcMJ/13aM++P7wmWJmrSyEjy8Cvj3vyeJXeX6+7aN+u6s/TTcX9+YXnvbSvXhfVk6sYPjy0voEJ0yJ3dty1EiEjI5g8Fwu4gKaKSHlkgy+RaRN4YWbBSa41zNdwEp7tVrxVwMPeNGchjQuDigHbznaCH4LOFQVsV7ZxnbKh9cYVVXSsaWC4dRHNSAiZFKXqLfuvj0I3eczv/zhlGbqMx14BTox1P30A2MnAYM4yfZg2jaoABt+Q4YRi8n9BHNhLJZMLz3E7H9XB6+A1vrqH7QZk+YlT14VVGDh5GxWzETV2A5jE4u/k2y7JLsLYzHMuw0kLeInj7AZaNVvLteh6ujZ7M19t5eBGO4wyn1mGdr0Qr3MYcuZmdpN/estHA4jzXu0QJKEENcHaiEVTZ6UA+uupmeBGpfPQkXMuNoRFKBpu/ZafYPPFJyHNB3Eb5z1EzjgEiwrnDB36wiRiHwhjJNPYT1XJKw2dLjlOCSdWy1OjVWn9srF+jP8anNfw1R6l/KhbiXFGBF3D9PS5LD5Ucy7NQbnh0Sx4uV60zCpf1LC7rIY51N0+yt9kiyZEGZmuA+xwgcHB4MW0wjX6vj9nrt8D3+gPo9+JJTGjT9wbAUS0DHv3H3u7U/a+98UCpaJj3Hzl0eP2ur2wcPXrrE6OWXf05Urf9bHTUrh689T4ZdFuOx0cvee2NB8Pp760fumb9oZKlGyPLX5Z+hltYefTBtK1DOh55fxXJ7ZvPsWNsD3YpnXTIFeRmcoKf6xcqyefZzA+WIaB6sevdsL+NkQidvBwRelld4kAcb4gjaL/X9baqko+xQp9rdJDoxLUba3I0xesc1uMVa/kxmuP74NPxed+fX1rwvAW/0e3u73ZdJU13Tl93TC2HwdrV7x5aDUJ74nXHKcvy2uWXHTTyG9fYU1P2y40STExctn/tq6tHujOzrQPdsCDaEzBZSWfC7uLU7Ey4vvru3t7EqEFpY8fC8snl+UkPqDE60dtbtYspS2IT8DX+bt9fWJr3PwovD/EevpmizdbhBybmdq8vXjk11Zq6cvHInt2HXhobK0lM9BvHr7woaBxfq4yPV365vzNzYH53wz/7uJIpVZbLppJmqXKzWU6xtGKWlyuljPKyqKQVWZKzubSiyLlsOikr8kiiUjaTSdbAnOpg7b3LFjCj1sgd5F6Mz842720cbbIUsZADYdDrY//hQyfo8/YmiQ72PGerH2JskGmfZzCO3ZB31hoqx91UlL5UTdtodO7LyT/3EWtjqE/DYrpXH35Y76QPQiqcarSb+63S/pV9lrW/GTQmO/eaNTvMgSAo47LIcuFsmBMEeYecEHLdgVmuiQdFizqKJCcWxRrLqHJy+KOkrI1qgUtvd9vq7cOPFU1TqJZRQaMXSadsp175vVCudK4uqvVqtc7/enEtqHxXsa1UQsmIkmXbVlLIjIgpqzKS7Y9phd/pwBLKaVUd61+vZqJPkrKchExGRfo/ThA4UFC0P+FL8Y6/X+Y3/8peYQP+PYzgLcYAv7VrBBf+QRl/wjt0ojxejp7RymUNrkESDsfk4ej5+LnKpw5yMvoFkv8DeZMqRXjafZA9TgMxEIWf8wckEkIgqF1RANr8lCkTKfQIpaNINt6QaNdeeZ1IOQEtFQeg5RgcgBsg0XIKXpZJkyJr7ejzm5nnsQGc4xsK/98l7oQVjvEoXMERMuEq9RfhGvlduI4WPoUb1H+Em7hVA+EWLtQbHVTthLub0m3LCmcYCFdwiifhKvWVcI38KlzHFT6EG9S/hJsY41e4hWtlqQzhYTBBYJxBY4oN4wIxHCySMgbWoTn0ZhLMTE83ehE7mzgbKO9XYpcDHmg554Ap7T23Zr5KJ/5gy4HUmG4eBUu2KY0uInQoG18snNXdqHOw/Z7ttrTYv2uBNcfsUQ1s1Pw92zPSSGwMr5CSNfIyt6QSU49oa6zxu2cp1vNeCIlOvMv0iMeaNHU6925p4sDi5/KMHH20uZI996gcPmNZCHm/3U7EIIpdhj+T2HEZAAAAeNpdi0sOgzAQQ2Mg4Vv6WfQWORSFKYkamCoZqcfuFVpBV30Ly7ZslamdZlOof65bm6k3MuQoVA8NgxIVajRo0eGAHkeccMalCD6JHh2NDz0GTmTuHO1ClbBlcRTrYZ0DWeFnt7sbi/BSJhLx61wO0xQpJTNRIKF2iJFfNvrZSbf7fV/Q5MUkGuLo6t/Hsk7CkfJv/gAejDKcAAAAAAAAAf//AAIAAQAAAAwAAAAWAAAAAgABAAMAFQABAAQAAAACAAAAAHjaY2BgYGQAgqtL1DlA9F3RzucwGgA+swZuAAA=') format('woff');font-weight: 500;font-style: normal;font-display: swap;}.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}.icon-check:before {content: "\e60d";}.icon-for-me:before {content: "\e621";}.icon-to-other:before {content: "\e622";}.icon-address-o:before {content: "\e680";}.icon-store:before {content: "\e687";}.icon-address:before {content: "\e62b";}.icon-angle-top:before {content: "\e627";}.icon-angle-bottom:before {content: "\e628";}.icon-add:before {content: "\e711";}.icon-close:before {content: "\e611";}.icon-edit:before {content: "\e652";}.icon-minus:before {content: "\e600";}.icon-plus:before {content: "\e612";}.icon-list:before {content: "\e602";}.icon-delete:before {content: "\e63c";}.icon-search:before {content: "\e66d";}.icon-arrow-right:before {content: "\e646";}.icon-arrow-bottom:before {content: "\e648";}.icon-setting:before {content: "\e62a";}

4.使用图标:

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

到此就结束啦,每次新增图标都要重复此步骤哦~

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。