阅读 210

微信小程序-lin-ui自定义字体图标

项目中引入lin-ui/icon,但是lin-ui提供的图标有限,想引入其他的图片,怎么办?(本文演示使用iconfont上已有的字体图标,追加到lin-ui/icon中)

背景描述:在components/articleItem/index.wxml文件中使用iconfont上的字体图标

1、登录iconfont,选择需要的字体图标,加入到购物车-添加到项目

微信截图_20210319130714.png

微信截图_20210319130922.png

用浏览器打开红框中的地址,选择下面的代码,粘贴到需要使用lin-ui/icon组件对应组件(页面)的wxss中,也就是components/articleItem/index.wxss文件

@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,d09GMgABAAAAAASoAAsAAAAACXAAAARbAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDMgqGDIR0ATYCJAMUCwwABCAFhG0HSRsBCMgOJRHB2BhgIAFgBE9zn/N2N7lcciUCByyJfFVZAoBCW8W2ssJXXy2wrvr/16Z9Eoe6TNVloDQCj9B219Ouu51MTman5uCY6ZITJA9oTpmNAxwPaEDd/00t/A9SgPLubxG7dq56MIHnCbSmCkVszS+tBZVCnBaI4yzTBSqPWkkghEZWR6wtI4mFINeku5K7AB4bnx+/IDpUJFUmXrTrWF4vZH6FT73ZaDJqzSNgrM6I2yYyFgOFOBtpPk5qhReTaj/fJ7MRaDWS9BU+WX9N/trbM/HlD0jaSv/wKLIkiJooHmDYjZHCV1DYjsQaShmSZCglSHrBXRZxpa1pMQL4T8wHUTraKKhVktIiMN6ZsKfwi2JgkoerlYzZutO4a86e4d3+lPVuLRZHn6K06VlcV7dsjmPNlYzuxAufvPl525WzvuTSnXa19ct3O5Dbz7tI1xygLO/vA8l5q6tPUcmMyFvcQN144VNtfp4f/PbzwxfmnHvqCXO7gVMRLbwCJGzB7POEhrRfezG2rDrnZ573VkdfPK9v97gS6x/Pfuh2nmzY8Dz46Wn/40/RlaeltTtBdmVXk3POuLY8f946VN7ddzwT8SLFcQeoOfb73GrBaL8tgLr2zOscufUslHcAteMCIb96vpWUd7NG+W9R/yIUa+dgp4Xjv+x70n3Fm7SNsA8ytv/YuXxtDBWT9PvL3h8eA+yDqH5KD2cFv/tHFQyel/rDore7eYXqg/KN0zMnZY8PkPiqVt1ZWKhQVjuLOkenbcFcU2VRkVxZ7yzshLXXNnrHESLauRCcn+hMl8J7o0XyjvP+IwCufENvMnajz+h1xi4kX0Co8k21j+Wq7zY/uqvPx0aSZfVMBXEsk5qgzK3IVcL6zx0frSZEW2Wn3o/cWBWdPc/Sn03oe+g1dL2Ft0W+Y0g9/1lSrdenr/ZvrSR7ZhyNzqFqcmwUFi/rip0OmSmWX7p0uXJnXmzc93PcRuzaROUe5DbWGQe51rms4po4qATovctnpO4UPZ9nSbMvpK+xYFP8245hqX9UVAGD4/b8R1nPWKqlIwBXg0RmzmVTV6oAeqZSfeeJmqq8rUpnSHdv73BlF8XdmrhCGi4W+0ivqpGPORDR0BjjQNJnCmSN2ciCXQyVzmqoNTZAa5GCzZ1RBFJR+rHQNIIw3AFIhvoE2XD3kAX7EipjfYHa8JBC60DY7tmZGyyZI+AuEfei7rGI7eH0tKwTSTO3GjMD2i7BzTPI9VgwsD4UFR7pjxVgPRaqWGAYZKJFkUa0wOlQPl2GtVoO8QLXj3vE8D5R5JMjIuioJwrv4XRA2kKAdRFhvZBuYyGsHhw9WussIgMfXw1jDNDqIiS0/DDWwwQGbO9IlHCRGZAFYn2mll15jMEgRjSRiIbQBBwdJJ+MmFYKcxA+elQ/rIcoXF+BIC9ZBGtHZxWHNy/VreMuaImXVZEiR4kqan2nWT2jHdCrjKQo6bguvUwxRQEAAA==') 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;
}
复制代码

2、在miniprogram_npm/lin-ui/icon/index.wxss中添加剩余代码

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

.l-icon-zan1:before {
  content: "\e600";
}
复制代码

3、开始使用字体图标,找到对应组件(页面)的wxml文件,即components/articleItem/index.wxml

<view class="article-item-btn">
  <!-- 使用iconfont上的字体图标 -->
  <l-icon name="zan" l-class="iconfont" data-user_id="{{articleItem.user_id}}" bind:tap="handleLike" />
  <!-- 使用lin-ui/icon中的字体图标 -->
  <l-icon name="like" />
</view>
复制代码

4、保存上面的修改,查看页面中字体图标已经生效

微信截图_20210319132135.png

文章分类
前端
文章标签