Lin-ui /icon is introduced in the project, but the ICONS provided by Lin-UI are limited. What should I do if I want to introduce other pictures? (This article demonstrates the use of iconfont existing font icon, append to lin-UI /icon)

Background: the components/articleItem/index. WXML file using the font on the iconfont icon

1, login iconFont, select the desired font icon, and add it to shopping cart – Add to project

With the address in the browser to open the red box, select the following code and paste it to need to use the Lin – UI/icon WXSS components corresponding components (pages), which is the components/articleItem/index. WXSS file

@font-face {font-family: "iconfont";
  src: url('//at.alicdn.com/t/font_2430598_zml87t012z.eot?t=1616130552626'); /* IE9 */
  src: url('//at.alicdn.com/t/font_2430598_zml87t012z.eot?t=1616130552626#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2; charset=utf-8; base64,d09GMgABAAAAAASoAAsAAAAACXAAAARbAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDMgqGDIR0ATYCJAMUCwwABCAFhG0HSRsBCMgOJRHB2 BhgIAFgBE9zn/N2N7lcciUCByyJfFVZAoBCW8W2ssJXXy2wrvr/16Z9Eoe6TNVloDQCj9B219Ouu51MTman5uCY6ZITJA9oTpmNAxwPaEDd/00t/A9SgPLub xG7dq56MIHnCbSmCkVszS+tBZVCnBaI4yzTBSqPWkkghEZWR6wtI4mFINeku5K7AB4bnx+/IDpUJFUmXrTrWF4vZH6FT73ZaDJqzSNgrM6I2yYyFgOFOBtpP k5qhReTaj/fJ7MRaDWS9BU+WX9N/trbM/HlD0jaSv/wKLIkiJooHmDYjZHCV1DYjsQaShmSZCglSHrBXRZxpa1pMQL4T8wHUTraKKhVktIiMN6ZsKfwi2Jgk oerlYzZutO4a86e4d3+lPVuLRZHn6K06VlcV7dsjmPNlYzuxAufvPl525WzvuTSnXa19ct3O5Dbz7tI1xygLO/vA8l5q6tPUcmMyFvcQN144VNtfp4f/Pbzw xfmnHvqCXO7gVMRLbwCJGzB7POEhrRfezG2rDrnZ573VkdfPK9v97gS6x/Pfuh2nmzY8Dz46Wn/40/RlaeltTtBdmVXk3POuLY8f946VN7ddzwT8SLFcQeoO fb73GrBaL8tgLr2zOscufUslHcAteMCIb96vpWUd7NG+W9R/yIUa+dgp4Xjv+x70n3Fm7SNsA8ytv/YuXxtDBWT9PvL3h8eA+yDqH5KD2cFv/tHFQyel/rDo re7eYXqg/KN0zMnZY8PkPiqVt1ZWKhQVjuLOkenbcFcU2VRkVxZ7yzshLXXNnrHESLauRCcn+hMl8J7o0XyjvP+IwCufENvMnajz+h1xi4kX0Co8k21j+Wq7 zY/uqvPx0aSZfVMBXEsk5qgzK3IVcL6zx0frSZEW2Wn3o/cWBWdPc/Sn03oe+g1dL2Ft0W+Y0g9/1lSrdenr/ZvrSR7ZhyNzqFqcmwUFi/rip0OmSmWX7p0u XJnXmzc93PcRuzaROUe5DbWGQe51rms4po4qATovctnpO4UPZ9nSbMvpK+xYFP8245hqX9UVAGD4/b8R1nPWKqlIwBXg0RmzmVTV6oAeqZSfeeJmqq8rUpnS Hdv73BlF8XdmrhCGi4W+0ivqpGPORDR0BjjQNJnCmSN2ciCXQyVzmqoNTZAa5GCzZ1RBFJR+rHQNIIw3AFIhvoE2XD3kAX7EipjfYHa8JBC60DY7tmZGyyZI +AuEfei7rGI7eH0tKwTSTO3GjMD2i7BzTPI9VgwsD4UFR7pjxVgPRaqWGAYZKJFkUa0wOlQPl2GtVoO8QLXj3vE8D5R5JMjIuioJwrv4XRA2kKAdRFhvZBuY yGsHhw9WussIgMfXw1jDNDqIiS0/DDWwwQGbO9IlHCRGZAFYn2mll15jMEgRjSRiIbQBBwdJJ+MmFYKcxA+elQ/rIcoXF+BIC9ZBGtHZxWHNy/VreMuaImXV ZEiR4kqan2nWT2jHdCrjKQo6bguvUwxRQEAAA==') format('woff2'),
  url('//at.alicdn.com/t/font_2430598_zml87t012z.woff?t=1616130552626') format('woff'),
  url('//at.alicdn.com/t/font_2430598_zml87t012z.ttf?t=1616130552626') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('//at.alicdn.com/t/font_2430598_zml87t012z.svg?t=1616130552626#iconfont') 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; }Copy the code

2. Add the rest of the code to miniprogram_npm/lin-ui/icon/index.wxss

.l-icon-zan:before {
  content: "\e611";
}

.l-icon-zan1:before {
  content: "\e600";
}
Copy the code

3, began to use the fonts icon, find the corresponding components (pages) WXML file, namely the components/articleItem/index. WXML

<view class="article-item-btn"> <! Use the font icon on iconfont --><l-icon name="zan" l-class="iconfont" data-user_id="{{articleItem.user_id}}" bind:tap="handleLike" /><! Use the lin-UI /icon font icon --><l-icon name="like" />
</view>
Copy the code

4. Save the changes and check that the font icon has taken effect