Shulou(Shulou.com)06/01 Report--

In this article Xiaobian introduces in detail how to use iconfont font icon in WeChat Mini Programs development, with detailed content, clear steps and proper handling of details. I hope this article "how to use iconfont font icon in WeChat Mini Programs development" can help you solve your doubts.

Use the iconfont font icon

Create a new project and add an icon

Introduced as unicode in app.wxss

Font-face {font-family: 'iconfont'; / * project id 431644 * / src: url (' / / at.alicdn.com/t/font_431644_aahynh36y6lp7gb9.eot') Src: url ('/ / at.alicdn.com/t/font_431644_aahynh36y6lp7gb9.eot?#iefix') format ('embedded-opentype'), url (' / / at.alicdn.com/t/font_431644_aahynh36y6lp7gb9.woff') format ('woff'), url (' / / at.alicdn.com/t/font_431644_aahynh36y6lp7gb9.ttf') format ('truetype'), url (' / / at.alicdn.com/t/font_431644_aahynh36y6lp7gb9.svg#iconfont') format ('svg') } copy the code

Define generic icon styles, define pseudo elements

.icon {display: inline-block; font-family: 'iconfont';} .icon-home::before {content: "\ e600";} copy the code

Use

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.