How to use custom icons in WeChat Mini Programs
This article mainly introduces "how to use custom icons in WeChat Mini Programs". In daily operation, I believe many people have doubts about how to use custom icons in WeChat Mini Programs. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts about "how to use custom icons in WeChat Mini Programs"! Next, please follow the editor to study!
Reference fonts in wxss files
@ font-face {font-family: 'iconfont'; src: url (data:font/truetype;charset=utf-8;base64,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) format (' truetype'),} .iconfont {font-family: "iconfont"! important;font-size:16px;font-style:normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale }. Icon-fanhui:before {content: "\ f0343";} .icon-gengduo:before {content: "\ f0344";}
3, use fonts
Return more
4, effect drawing
At this point, the study on "how to use custom icons in WeChat Mini Programs" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!
