Iconfont 阿里图库使用(小程序和H5)

article/2025/8/23 7:55:24

前言

  现在前端发展的太快,前端优化也是,图片也是被近2年来比较火的就是阿里图库取代了,不管小程序还是H5 都在用

 好了,那么就介绍下如何使用吧

 

阿里图库

当然需要你到阿里官网  http://www.iconfont.cn/ 

注册这个流程我这边就不讲啦 ,到你的项目管理中 选中 Font class  然后点击下载至本地

然后解压那个下载的包,双击打开

选中上面蓝色5个文件,然后放到你的项目中

H5

我是在这个项目中新建了 iconfont 图库,然后放进去

因为我是在vue 中引用

 

 这样写就可以了

然后在相关页面写

<i class="iconfont icon-tab"></i> 

前面那个iconfont 必须写,然后 后面icon-tab 就是你想写的图标啦

然后你可以通过

color:#1A9F31;
font-size:20px;

color 和font-size 来改变大小和颜色.......

 

小程序使用

使用方法和H5差不多啦,但是考虑到小程序包的大小,需要用另外一个投机取巧的办法

 

 那就是这个点击在线链接 ,会生成这个文件

当然你的小程序包里面只需要引入一个  iconfont.css  这个文件,然后把这个 文件后缀名改成 iconfont.wxss,

@font-face {font-family: "iconfont";src: url('iconfont.eot?t=1532935642563'); /* IE9*/src: url('iconfont.eot?t=1532935642563#iefix') format('embedded-opentype'), /* IE6-IE8 */url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAABoIAAsAAAAAJ7AAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFZXTkuKY21hcAAAAYAAAAFgAAADyAsf2wVnbHlmAAAC4AAAE+oAAB1ww/Vv2mhlYWQAABbMAAAAMQAAADYTOQFSaGhlYQAAFwAAAAAgAAAAJAjvBLFobXR4AAAXIAAAADAAAACIiYH//WxvY2EAABdQAAAARgAAAEaJGIEYbWF4cAAAF5gAAAAfAAAAIAE4AJluYW1lAAAXuAAAAUUAAAJtPlT+fXBvc3QAABkAAAABBgAAAWT9AjW1eJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2Bk4WacwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGBwYKl72MDf8b2CIYW5keAAUZgTJAQDk1QxweJzF07tOQkEUheH/cLwC3sALKt4aC8TEEOOlsbLkAVA6EhqegIewsqCy5MkslvEVbHAN28YYEwoTZ/LBOZMB9pm9AOaB3Jo2B4Umma/ITr2aTddzitP1OT583+DYV0WGylVWVTXVda6WbtVWVz31NdCzRhrrVW/vT5OJPzMUKqky3XvmvVfe2/ll72wjcx0NLmhxOZ03nnee9z9m2rvHERXXnftpi6yzSp0VNtjmgC12KbBMlTL7nLDGIgscsumnLLFEjR1/xcLMlf35yP7vp7+PcnrJXr7uTmz4xSWK4LNGWfCpo0Lw+aM8uBPOQ0jZUzmkLKoSUuZUDe4YqgX3DtUD6f0suJ+oGdxZdB7cY9QK7ja6Cu47ug5OALoJpHpvg1OB2oFUSyekk9BDcGbQY0hnom5wjlAvOFGoH5wtNAhOGXoOzhsahfQ/1DiQzuk1OI3oLTiXvD8Fdj4BQleNkHic3Vl7mBTVla9zb3VXVz+qu97T7+lnDUwzQ0+/mPcwM8hDYJAYEBAQFDSChJeoG4KjIipjdBJdRV0gwbii2WRjsuZzlUeyMYnR5IvfJvu5MMkSdjcx5qHZ7K6bz9DFnls9sKOs2f1r/9ie7lt1zz331L33vH6nhnNx3Pmz9Bht4lSuhStyw9wSjgN3K6QlEoeUVW4jraCnXLqpSdTKWCkhk26jvWCm3ZrRUS3nTbfgDoIECSilOqpWG7GgUu4j3dBhxAHC0chHlFxMoePgbbISd9sLyBHQk5lYsG+GPb/Qr3U0q55b/IoSVpT7PW6Xy0MIH5TgJtMQXaLXbX/eFYzox5LTSBL8YSuycEWgOaqsu7e8JZ4zRYDRUVCjzdLT/XJExu/uiKEqYSEU8DRFApmsBrf8s69J9cfz/8Thh5w/f/52ntA7uHncfNxlvlqr9kMbZHCvWoKUOvpIrQ9KHYauCRLFfRLcCHZN5OrDDZpGEgxNcAsStANutEheVqmfqm0z9y6et2dNtbpmz7zuTVf1Bz2tiUzR1bTmjkPLN700dsUVYy9t2vXduRHFEEKSlxAgACCLOX04N1QW4D1vwkuCuVp/dfWeB/esruaHV9ci6Y50KLjknnW1Jfe/+KNj+69Yd6UmKXg+quINdzZflrRkEQ/KIwcpx3lQh810lDY7OuzmFnNruPXcdm4Xx+XSVhtYlXKVaQN3kEBNldJ5C7feB7VJugSCW03ne/EokLuPcZm65k4xEnJVE8C2LCAJHFq5iqrGeZo7l6qk/lva3/D8+l1EiSlw9cKA5Ja3+WRKpcDCqwFpZNd6/oTUGBKMAGOs/05i5IAhNJjI0vqApCgS+Tq29aVktD5KPnsJ6fcQObBhKyNuHdml8UZTIOALGLy2a6RB3HAgAvZRRbrGGY0EKLJfw0auwREaiDisSCBfV6RRRsdmYODcwNQesxs83xN0PR3kZC6BdoNnYXCmgSbeD0oND03GHx4UHhsOEe6RV3gNwglRAkncMgH8K48MryJk1XCjpYNIeML+s7DXtwf8n0Lmug2rhuesJGTlnOFVwHE8Pu8k/QYdQG12cgu4VcwjdWZ/ps50lbeYzTKVIK3UUatyNVQAUzSSLnzT+QouqcOwNEd5mvsiocHhEHBmh0G+6YJ0XKVk7w0BU5C7svlErBnIcMXt9f4Sii7inTNzxtAW0IILNwJoSY1+alNQ07XQbU9S7PGvHghpOo4ePcNj1wXCt4MamR9Ssl2y31A2P6oQnz+W1uTOTGUeDwYMv615Jf+MToDyiqAGZMPCoKYFN32K6tuxS4/cFtK00IFXeafLn3majX4bBJfOfJjZegFtvXCprcP/a1sH/v/E2JmtD2CM5DiR68AzVV2CmnOpVk5NY5h3SQRjIHUbplFC42ctnq1FscHzzDG7JMG7oX2iZP+b/e+lCWjfq6fFrbatJQOidLxAQ7JqKPJPz8qKocohvvW45AkkNNveKqYN8rL9mxkT9g/Gx6E4MQNGDOWtPA3nc8Fj9nta1h8Qb7tNDPgxqLuPBXP5MM2/pRi4Su78KA90lPNxBpfiClyNG0KrWMFtYF7DMU9FK8/jDboPLl6oVqxqqSMJer4dqoKTAsx8RqgK+Uq5H0q4y7yJRoN/NbduYn7LpNuhgjPdNSfVWUapxm4zOBEl6hrhTttnXC5InT4NKZfLPrMlHQ/4IopnDO4PBfNpObR0dfph0RdNBseMnXulNPG6XkaatN6PXDw/BpD+4kXGh7y+yCRjlFCHD9UximJPT3nMOclkfKExc8eBC+Ku9Tce6kjLZZi01EPssYLHEZd533MdxrkeMfiR1ekcPn0yzj1O36Y3c3O5+znO5bhIe8NTWHxzwofpeBZ+BY2dhltICCw/4jlOHdSdIAMJWupgI9UKSmBhK43ZE/9awQliVsaRXcvXHKZy3uGx3E6K1TElm+QXxS2F7ltnNVXXZmMzCelQAnPzUlpX0/5gzCd7odmIqD4XqC3t7Z09OYFH0CAZzUIqpbUZSqtmaPwczVhj91e3b1kZjwxnU7pCZ5amZw2dFzwe0afFwNVRS/aFoamkZ0O4ZNVUJb/gV+OZdo/bbGqKJLLDq8obycxYdm2tqXZrd2FLsbLa0OdQlN4qmzP05rSQNCWvyLuEXHdXe3uLQtxeLWw0gzfki4X8aVVPBfOXSUoR2sqrhrLxqBk23J72bEzzCb6gaqgJCGWNjnCkL1ntcCPVi2ujupGbVipSUPTm7JxIfOVNO6ocJzB7p/9Ct3JN3HSuzM3iergBRG2cK9UGFblcrZUqJT2FvxIqQkY1yOU8IrhMJYW/TNot6Ck9JTfQWiWH9ziQEko4iD/6pXMPx3K52MQglGZPxHIAuVgu9vhs+/uDj2GPbj73MFLIW7Fc/Tn4mr2A/e6ajZ9RJFMNWa7CD96f+zVj16N5NpiP7h20y0zu44MTg8vxx3HU8VvO8dssN/P9vqqix8kshVmygGkK3bLawaCXW8X4i1tMJTD2XuJ2gYD4FZCjMjwnRmXPm2LM8wuPHKq/G1CUAPFie4kX1Y+KX7XXsXE49JxXiYo/94pvilEFhhQUg7IUJxf/EvONwUU4C2PLLFxpI9E2sn3JyfsYDAneuKbiADOTT7t1wyyyJI0DRRqhh2+99TCFzo6VWz2tnq0rYnNTg7PiZkcn2D+/bh8h+65j7Z03vIMJKAiBzl5XWVjYB+dvOUjpwVuGtlkznrph/eOZgBqVg9a2obfI3muv3UsabVQQvSFh+m2XX3l/cTJP3kGfp3s4hWtGS5nHjXAfRSSx1ll/TTAwgMkGn8SUl63J1M0L+awlNxbvMswM2kUmb5noi5la3sLgmZFLckrXMmkLg16toyJnquimiI1rpjNuZXS0PAvNiD7246f5En/0x7EIbMr5/Dm4MTJLsf9uYI39duBzJ+OJE5+zV0ne30D9jBLcYxmRXTEt3Kwrd1pwfToyjfLTmnvulp+qdIrBSu9rLYvMvnLu9dwXcvv20YCw3gOe9e76688848LPM8+QmfXXbx/Tc/dtg9+7L0unL3P3NKmWlY6NNllZLZowojH7URj+tcVLzQBzIK71VyyvMa1aTpQS0wuxL8czixiuYHXQXnqO7kZ7NLkuRBbD77dJOkW3lOEnrH4qTlXQwFM6IzgYAr9tQDMJYOVRGu30DfssWlzyjTcgiXZ69o0X3nW53n2h0Q6vxHJIg+KCIoYeJTYD9IQOzVqkFWDlcA2SbUn80k+waVPEnFt+UcAL75K/JSuGgroezM2EYk7KKJFeq8wwVFnOa01d2eGV9ddMJiY5aRe3O/nSy2mYLzu5y9EuruHWMfyEJZ3ZB+V8xmosXTNK6pQjsCh6pICbqzQOIp9h54AJ0mVagjsz1fjhQnmYcf2X1CIZFiVJDMhyYJEUCkV1PSCeanjjqUkfPn2NaelXNs0okn0brtor+73Lt2Is9cIquT+rKMu2ErJ12dKdFNqy9nJJ16MoCm72BgLeQCgUgFFJ9QP4VWlbKBoMRkPwAIo8dcHhT+Ej6rcL7unzkiMzl3+cwMoFhNw4EmmCpT1ZDw/r5s9fR8i6+S1zInA7zkYZX7ggkANmJPR1coIhDhVtnsvpZR5Km9/wYDG3zv6h/UNYsvkNEfLPLgudtG9k7Cx23IlnvZvLYITrQR90orTjZk4Iy6QwQsh4yiwWywygsoiNca9cw4iHpaZTiLOIV2LsJk5uYE/NTefVt7b1AfS1gc10bxPWknFs0Zygzz4XNHxwoy9u+OxHfE+dZqOnQ7r+mn05u4Xnsd2Ds8kpJkVLIq1uOSLmMtOpv9jeRy4z4kyEEffbj3gdscg34TAntcl6+tP0D3Qn5qIFCBgB8zdL8IAaR0ggAoOH1XI7A92yhlthKIDZjJ5hoZ1ZmCCz6IgHwt4X6DKLpqyYou/Ys3mv0iL7qD3oM2LBBByGl7Sgz+PzPS2pYCobSVfhukI3bFRMUGMqQHfhS0heqZh/WegioErwJPw1L/j9Ht6e508ZrmAcPmMvCgj+lB9nSPYGxfxZoQugq/AzU4EnJBVp1xSwKEkrpqnY/wCdBfgsPopr5Kpz9CQVsP6znDcHgrMLtnTTYJrLm21s0yaqTAI0fAfNWHlWG+YlcJCnyTQoNKBNwgkSzCeI9OaO4mxCBjp2vBluTj0rmoocDIeDsmKKkppMqk8qqYBohkDkfaoSjsXCiurjRQiZYiClxJubCWbk2cU3i7PhYa/aRL4aVl4WQTaVeHFvR1wxQ2Iw1/vZ3lxHYprPQxTTwwf0ROu126+bnjD8vMdUweObFi/uuHP75D6/RffQbszIgxgXWKZobyC1Cmo2CBK1WKiTHYjX4ZRVTqXJGOSawQgIpovOcM1ElecswTSwULDoHkiHk3R+sdSjhayQ6u5eO582h9MAcwd7Rz8+2js4F54vbf7opnJnb8JzZbU86NYigZ7CrGV8otc+s6uwN5AOvFMg4+EUuptX0bMg+f0BVybnxX4qbJ8YHuvvGhjo6h8bPlucNatY3VnDtYBfM/IuSRVTiu4DsL9R2/nEzsJdfv/bhcmYP+qSMRbKXJRLcu1ciXko1sWOhzJv1CSSSzGjTOG+LURKgGGOVYCN91ua2ypVMvR35yohEwtX+ppsQOvSG85l6ZGrbibnVi+/mWT4b/yhH+76Vcg0Q7+STfNHhw6NmiHy0m1HqBmqz+m8YWnrEnLzcvIZbLqO2YNgyE/IhtMsXshxblzjffQ/6CcclNSDWWkxRmtOLbNUY6aqhqCjgioYXVN5N67XMDFUCCwW5yuuD6QsvHFyk4XJP4VVsclAAF470i6mXYtFfIRZqK9qWSRXlEh4YQ/w3XwiX3+zJQbNmX1Jkjqcq/pd5OADx3n+xAMPHuP54w9sO0DpI9u2H6Dk0ectPmPflIPsUAufHcLrsgJZ4k/6j5b8SdM3gnff9MGRDcPPrJhBoW/+kEWzQ9kkhFvr62J59iywUqr2VRT64HFKTzz4wDGynBzYto3J3rrjwPf5Hh6/321cxv3+p0s+M+kf8fm+6U9yfpbb6Kv0DtRtgJMQsUXRX1sQJVfQnocQAXFqRkPL7XMiEUbazMUjkUCd2qFTOzA5qYz1iwSuqUMn780OzJudhcVdXYvg/H1kEbsCa++Z2rnrXudCHBJ54r7s7HkDWWemvW0MRrq7R6DRjub68vm+nMNqj3QthoZkWET+alIWI9XnXBCMbHAaJ+T6LmdN6qIgGGnUc7fzzWjfcTwHTFhoA2gTFZVZdyXlROUEKTH7roikkkcMqOTol8GK162YBXiFh+ybZn8EjOmVBHl1cC2x/xUK9o8C9rfGvV+Bme+cjiMX5OPk7/FmCb22t15NVKYbZFnvaXI9S4l/4S1+OQ6HEo1c2MD7fswWWawwORZBGjADw4X6YVBLqFnVdsBaPYMm2kgsgulGM01CidWdbQC/DMzway2zWjSvkPxATXD6+Hsu13vHnfahEIIqH1asLo/muxqziu99BMlrkVbRq3W2tHSpXhE++sGSe/4FQdhCNvhTt+QFF5ZnV/tiBlZ6Z11B7BMC8tVBy3sBUx6lT9G1iCf7MZ4u565lb53boVHnYjEWBwTVDBGkHKyUkjNOh72TKjETTTnpkSWalFwsC+wthJBycJkz4cPu6SHiGsmaAdyYIPqfrf8mmgX4mOj3i/bmciQFpIpNC8xqrR/Bpgw9baT3WT0+3G9vxATrgcc9mDc/5J6sJa55Kay5eT4gnqx/EbJRctyv+usrINVEvoANz0+rQb0Nm8iMHiBHPZ4b5WjfXp/sw+/Njcu9jcv768BWhiKmYm7AhOrGWhDxUKMAdKpBB1IwoKHBxUE25MQuZ6zc4L6kQrQ7RwQpJIxks9bGaftzObcccEci+6PD0SZ4L399y1g2K8gBIRweiw6XI4uFgOweyV1SNdq3jrCJIygjmx2zNrYgnxAZjo6Fw9Fh+5O53H4cceNclLs/Uh6Ojgghh52bzLGv0K+hTWQxln+MeUHjreQFYFhi6K4VKQwYmo5v5qvqZGyehB3oOAyClwQGstEH8vR/I4Re6VdgbrX+g8pcTLuViaCiBCci2WyElKMZIPL1r4gRRRy/58lTPMhhGejX7h0bF5WI+F0B1v3xqTBb8f+kysaqpIJXJapBJlp/BQfx+pOQCoteYZLGXRNPLWP4f9n+F/g/ZY/DZ9rH/ofJ3OS7qQt2Yn2gMhMmzWTyXYHV0L9jFZeYgHT4oEdp8h465A2r4sFDohoRDx/Gkv9SLX/+8EGxSfE8gTxh76GD3ogqHjqM905OZgEN3sGLHzNNGDNNnuWWKYnB9aGdLVugr72dQXfWnv8jvdGLdx/eXvi/1p9Tm67GdVQa/5+4+IrC4E0GR7ONqlR1alXr4hu9xrKcQEvODO2cNm3n0J8coaQcXwOqIVuKDuqaRJnQJz1XTijBTFA+tTzaSeDWTT07crkdPZs/CbSProbeWbN6gX/u7kXbC/t+KwUC0m/3FbYvuvu5+tktL/p84Pcd32ZtnLNrnNBl5fIySsZ3zdmM6wZHp3NQpxHsNApH1Ks7bWGtOWWBVL7ri5TUmjfYE01yq9JkT2xorhH6pTvn7i4UdtNR/uT40t1tn7brQUkKAv102+6l4yd5GOzuHmzYDWLaO7gcNwOfUhHcLEBceKOEKaUd9BSrPSTAcoyVJVhhyQijqjUZ/nGf4I4T8h3qod8hJO4W7oE+CQ8lWF8QVNlLzl7wtIhAVry43+2OEQ/5HqXfw0vM7R7DcqV+E/vfBXkoqNmPYZnogev/E7gaiCcAAHicY2BkYGAA4hu3ldbF89t8ZeBmYQCB6y33bsHoK7AKMjcCuRwMTCBRAIXkDhsAAAB4nGNgZGBgbvjfwBDDKvD///9/rIIMQBEUoAQAo7oGqXicY2FgYGB+ycDAwvD/PwsDiEbCikDMiCbGgEMMST+rAJK4PDa1SHpcIGwAPIIIAgAAAAAAdgDiAZIBygJYAwgDYAQGBNgFPAWQBewGhAb4B5QHrggeCJIJBgl+CdAKZgruCzQLrgxADLgNVA2aDeIOPg5wDrgAAHicY2BkYGBQYuhl4GEAASYg5gJCBob/YD4DABq5AdIAeJxlj01OwzAQhV/6B6QSqqhgh+QFYgEo/RGrblhUavdddN+mTpsqiSPHrdQDcB6OwAk4AtyAO/BIJ5s2lsffvHljTwDc4Acejt8t95E9XDI7cg0XuBeuU38QbpBfhJto41W4Rf1N2MczpsJtdGF5g9e4YvaEd2EPHXwI13CNT+E69S/hBvlbuIk7/Aq30PHqwj7mXle4jUcv9sdWL5xeqeVBxaHJIpM5v4KZXu+Sha3S6pxrW8QmU4OgX0lTnWlb3VPs10PnIhVZk6oJqzpJjMqt2erQBRvn8lGvF4kehCblWGP+tsYCjnEFhSUOjDFCGGSIyujoO1Vm9K+xQ8Jee1Y9zed0WxTU/3OFAQL0z1xTurLSeTpPgT1fG1J1dCtuy56UNJFezUkSskJe1rZUQuoBNmVXjhF6XNGJPyhnSP8ACVpuyAAAAHicbY5JV8JAEIRTOAkBUcF9X/Dsf/Hg3deZNGR06M6byYD46414tS7foV4t2SD70zj7X3MMsAeDHAWGKDHCGPuY4ACHOMIUMxzjBKc4wzkucIkrXOMGt7jDPR7wiCfM8Zzhaxh4ETg2I6tJulo3kreeLI8sef/aqHARG/KaTOwoFIvgWOq83RlkO7fmvNM3bU2KHMoqRScc47ANWnleFRt2X06KyJ5tVyxIPpPrCzVt2TQapAws3w3LsqjJtbQ1LfVpr1Q7WU5I6qCu7g8EzqnS1Bmr7XbmHcmH45eup+2vLKfOqqy0InlvEvXIrdfIZqWBy985S7I0XtdcOo27viz7AYt2XqQAAA==') format('woff'),url('iconfont.ttf?t=1532935642563') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/url('iconfont.svg?t=1532935642563#iconfont') format('svg'); /* iOS 4.1- */
}

然后 把这个文件 4个 t=1532935642563 替换成 上面的链接 注意不要.css 哦 , 下面就是修改后的代码

@font-face {font-family: "iconfont";src: url('iconfont.eot?font_764642_eslngdh76dj'); /* IE9*/src: url('iconfont.eot?font_764642_eslngdh76dj') format('embedded-opentype'), /* IE6-IE8 */url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAVMAAsAAAAAB6gAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFZW7lHmY21hcAAAAYAAAABmAAABlM5mnkdnbHlmAAAB6AAAAWYAAAF4ejFuqWhlYWQAAANQAAAALwAAADYpREJJaGhlYQAAA4AAAAAgAAAAJB8CGqZobXR4AAADoAAAABAAAAAQN2gAAGxvY2EAAAOwAAAACgAAAAoBMgCabWF4cAAAA7wAAAAfAAAAIAETAF1uYW1lAAAD3AAAAUUAAAJtPlT+fXBvc3QAAAUkAAAAKAAAADpMlkw5eJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2DkvcU4gYGVgYOpk+kMAwNDP4RmfM1gxMjBwMDEwMrMgBUEpLmmMDgwVDyTYm7438AQw9zA0AAUZgTJAQAe2AxyeJzFkMENgCAQBOcEeRgbgBqML6vxZRlUTBu6nHyswE2GzS4EyAEzEMQmItiF0XWqNe8Di/eRXTnJjYnayn0r15bddUR7yX3qN1riN9l/T3+1+nqM1OdcB/piyy+aF628EB5ROg4PAAB4nBWPO0vDUBzF7/9ekyZ9JO3Ns+kzjW2UasG01kFsFx0sgoJTF6EuTjoJXRwCIjg4+A0Kpeh3kM6C4IdoqYsujjrYW28Ph8NZzg8OEhBaTMmY2EhDa2gL7aMThECsQknBOXD9Rg1XwXAFw9IV4nu+G/FKNbIHVknUzaDZqFhiRFRBgTzU3aDp17AP240W3oXAzAGkM84pLWcpeYSo7efvWAcPwSh4WbW1yQ432npQ1KR+nNI0pQ+SKAgSxiuqApeWKQtyVGQjQXWMcWEdFyCe9p2jbqKYob37xlWubMkAYQhapqg8t1NOivvGMTWajiQTku0kvFUd+h8xW4vnKjPERfjXMOORkDcJJfhPN+WCSzQeGnHxk/H2tWNmcW86nQ8+B/PBZIJ7JPxD5JYdsHPSXSbn4CVHP+McAcWWFHnpugwewHHyAjrs5XvEhvT6FTw2e4cKCZk0/8Uy/DCYL/gc/QO0kE6MAAB4nGNgZGBgAOLFNRsy4vltvjJwszCAwPWG/2oI+n+DtDJzA5DLwcAEEgUAQjcLKgB4nGNgZGBgbvjfwBAjrcTA8P+/tDIDUAQFsAAAe+wE3gQAAAAD6QAAGyIAABRdAAAAAAAAAHYAmgC8AAB4nGNgZGBgYGEIZGBlAAEmIOYCQgaG/2A+AwAREgFxAHicZY9NTsMwEIVf+gekEqqoYIfkBWIBKP0Rq25YVGr3XXTfpk6bKokjx63UA3AejsAJOALcgDvwSCebNpbH37x5Y08A3OAHHo7fLfeRPVwyO3INF7gXrlN/EG6QX4SbaONVuEX9TdjHM6bCbXRheYPXuGL2hHdhDx18CNdwjU/hOvUv4Qb5W7iJO/wKt9Dx6sI+5l5XuI1HL/bHVi+cXqnlQcWhySKTOb+CmV7vkoWt0uqca1vEJlODoF9JU51pW91T7NdD5yIVWZOqCas6SYzKrdnq0AUb5/JRrxeJHoQm5Vhj/rbGAo5xBYUlDowxQhhkiMro6DtVZvSvsUPCXntWPc3ndFsU1P9zhQEC9M9cU7qy0nk6T4E9XxtSdXQrbsuelDSRXs1JErJCXta2VELqATZlV44RelzRiT8oZ0j/AAlabsgAAAB4nGNgYoAALgbsgIWRiZGZkYWRlYGxgrkkMYmtJL8ASDEwAAAm/gRm') format('woff'),url('iconfont.ttf?font_764642_eslngdh76dj') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/url('iconfont.svg?font_764642_eslngdh76dj') format('svg'); /* iOS 4.1- */
}.iconfont {font-family:"iconfont" !important;font-size:16px;font-style:normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}

好了 这样 小程序里面就可以用啦.......

 

总结

出了这个阿里图库,设计小姐姐都懒得设计啦,但是也是 帮助前端吧 哈哈哈

 

转载于:https://www.cnblogs.com/yf-html/p/9391409.html


http://chatgpt.dhexx.cn/article/fms0mIao.shtml

相关文章

小程序引入阿里云矢量图库图标

简介 阿里云矢量图库&#xff08;Aliyun Vector Icon Library&#xff09;是阿里云提供的一个图标库&#xff0c;为开发者和设计师提供了丰富的矢量图标资源&#xff0c;用于在网页、移动应用和其他设计项目中使用。 使用阿里云矢量图库&#xff0c;你可以快速搜索、选择和下…

阿里矢量图库 iconfont 引入项目使用方法

1.打开阿里巴巴矢量图标库官网https://www.iconfont.cn/login? 注册或登录 2.搜索自己想要的所有图标&#xff0c;添加入库&#xff1b; 3.新建项目&#xff0c;添加所有图标至项目中&#xff1b; 3.1.打开自己的购物车 3.2.新建项目 不要直接下载代码&#xff0c;或缺少所需…

阿里图库的使用

在自定义控件中使用.ttf文件 阿里图库传送门 进入阿里图库 在右侧搜索栏输入你想要的图标关键字&#xff0c;比如“下载” 选择你心仪的图标&#xff0c;并“添加入库” 点右上角的“购物车”&#xff0c;将你选择的图标加入到”项目"或是直接下载 这里我选择“加入项目”…

阿里矢量图库 当前页全选 导出json文件

全选当前页icon图标 打开浏览器控制台&#xff1a; 将下面的代码复制进去&#xff0c;然后回车就行了 // 阿里巴巴矢量图库 全选 var icons document.querySelectorAll("span[title添加入库]");for(var i 0; i < icons.length; i){var item icons[i];item.cl…

阿里巴巴图库的使用教程

1.登录进入icofont&#xff0c;选择想要的效果加入库 选着添加项目&#xff0c;然后点击下载到本地 解压后把文件夹放入工程中&#xff0c;并把iconfont.css导入到HTML中 查看demo_index.html页面&#xff0c;按要求就可以完成阿里巴巴图库的使用 <div class"to…

阿里图库字体使用方法---新手适合看

Unicode方法 阿里图库注册一个账号。把需要的图标加入购物车。点击购物车后-->添加到项目 解压之后的文件要放到和html文件同一个目录下&#xff08;我因为之前没有在一个目录一直没有成功&#xff0c;也不知道为啥&#xff09; 点击下载下来的这个网页&#xff0c;会有相应…

做微商洗发水怎么做引流?洗发水类微商怎么引流精准客户?

大家经常会聊到网络推广&#xff0c;你知道什么叫互联网推广吗?如今微商怎么做推广找客源&#xff0c;微信加人快又多技巧有哪些呢?许多人对此是含糊的概念&#xff0c;今天就来讲讲关于这方面的问题。网络&#xff1a;泛指互联网。推广&#xff1a;指各种宣传方法的广泛应用…

微商卖珠宝怎么引流? 珠宝微商如何引流与推广

随着互联网时代的来临,电子商贸迅猛发展,各种互联网经营平台和模式对传统行业的冲击已成定势。其中&#xff0c;微商对整个传统珠宝行业营销方式的影响成为当下的热门话题.自去年以来&#xff0c;借助微信朋友圈扩展珠宝业务的各种微商模式铺天盖地地席卷整个珠宝圈,遍地微商&a…

新手微商代理怎么推广产品 微商大咖分享方法值得借鉴

微商代理的推广方式是非常多的&#xff0c;大家可以利用免费的推广方式&#xff0c;简单来说就是直接在朋友圈里面去发广告&#xff0c;或者是在一些常见的社交网站上去发广告&#xff0c;比如说可以在微博上面去发表广告&#xff0c;或者是在贴吧上面去发布广告&#xff0c;通…

微商引流产品有哪些?做微商如何引流以及推广产品?

虽然我们也做过很多的引流方案&#xff0c;比如&#xff1a;内衣、奶茶、美容院、保险顾问……都做过一些引流的方案&#xff0c;效果也都很不错。但渐渐的发现&#xff0c;纯粹的拓客引流长期来看是没有效果的&#xff0c;甚至会反噬你的生意。 在讲之前&#xff0c;还需要给大…

微商怎么引流被加精准粉?微商有效引流被加方法

微商有效引流被加方法 微商怎么精准加人增粉&#xff0c;微商引流方法很多&#xff0c;你学不完的&#xff0c;但是道却只有一个。流量的本质是传达信息&#xff0c;传达信息必要的条件是平台&#xff0c;传播者、接收者&#xff0c;这就是一个引流的过程。微商流量的本质&…

微信公众号的推广

公众号涨粉一直是90%的新媒体公司制定的目标其中一项&#xff0c;在几乎已经没有增长红利的今天&#xff0c;粉丝增长已经越来越困难了&#xff0c;新媒体运营已经由“采摘狩猎”时期进入到了“农耕时期”&#xff0c;所以谁能掌握粉丝增长的方法&#xff0c;谁就获得了在新媒体…

分享最简单的微商精准引流方法,有效推广必学

​ 你需要了解,你的弟兄圈的人并不是精确顾客。 她们仿佛压根即这是不是你产品的用户群,你想象一下。 她们看过会如何样?会烦吧? 有关微商引流 一样是做推广,有些人靠人脉关系資源(老顾客强烈推荐,大顾客),有些人靠线下推广(办公楼,住宅小区,大型商场等等) 有些人…

外贸线上推广引流的技巧

外贸网站建成后&#xff0c;很多外贸企业通常会面临一个重要的问题。网站装修和产品布局都很漂亮&#xff0c;但是流量很小。由此可见&#xff0c;外贸网站的引流推广是非常重要的。接下来&#xff0c;米贸搜给大家分享一些外贸网站引流推广的技巧&#xff0c;让网站快速获得流…

精准引流怎么推广:免费的引流推广营销技巧

大家好&#xff0c;我是夕颜网络 今天给大家分析的是&#xff1a;现在有什么有效的引流方法吗&#xff1f;引流推广需要怎么做&#xff1f; 网络推广引流这个话题真的是永不过时的。不管在什么行业&#xff0c;淘宝、app运营商、电器、会所推广、v商、自媒体相关人员等等&…

微商引流最简单最有效的方法

方法有5个&#xff0c;分别是&#xff1a;1、主动加人 2、群文件引流 3、论坛引流 4、邮件引流 5、互推引流 1、主动加人 最简单的方法就是主动去加人&#xff0c;虽然在微商界加人并不算什么高明方法&#xff0c;但是&#xff0c;在限定的范围内&#xff0c;每天去加人&#x…

微商推广引流秘笈—— 8 个高效的引流策略

不管做什么项目&#xff0c;销售任何产品&#xff0c;你都会发现推广是极其重要的&#xff0c;只有推广才能开发更多新客户&#xff0c;才能卖出更多产品&#xff0c;才能有更多利润。 这是永恒不变的商业定律&#xff0c;任何一个成功的微商&#xff0c;他都非常重视推广。现在…

微商引流的六种有效方法

现在不管做啥生意都需要大波流量来支撑&#xff0c;不管是线上还是线下&#xff0c;大家都懂流量为王的道理&#xff0c;近年来随着短视频的发展&#xff0c;很多明星都需要去蹭网红的流量&#xff0c;能够感受到粉丝经济的重要性&#xff0c;粉丝就是流量&#xff0c;流量就是…

微商是如何推广的呢?

想要做好微商,需要系统的进行,任何行业,产业,任何时期都会遵循一个定律,即二八定律 —— 在任何一组东西中,最重要的只占其中一小部分,约20%,其余80%尽管是多数,却是次要的。就是只会有百分之二十的人做的是好的,其他的那些从业者,做的都很差。比如股市里也有一个铁…

2020年深圳杯数学建模竞赛A题

从上个礼拜开始做&#xff0c;找数据&#xff0c;搞论文&#xff0c;线上微信电话一打就是几个小时&#xff0c;终于今天下午就该完工了&#xff01; 辛苦写论文的小姐姐了&#xff0c;还剩下matlab编程的源数据没有整合完成&#xff0c;等完了我晚上再发。 也没用什么特别高大…