TaleLin / lin-ui

🌈 简洁、易用、灵活的微信小程序组件库
https://doc.mini.talelin.com
MIT License
4.09k stars 484 forks source link

icon和counter同时引入会导致使用iconfont图标无法显示 #1505

Open nine-city opened 2 years ago

nine-city commented 2 years ago

设备型号: iPhone12 LinUI 版本: 0.9.8 微信小程序基础库版本: 2.24.0

微信开发者工具版本: windows平台最新版 问题描述及重现步骤: 在app.json里面同时引入icon和conter组件会导致grid组件中inconfont图标失效

相关截图image image

代码如下: index.wxml

`

{{item.name}}

`

index.js的data里面随便定义的数据 menuItems:[ {"name":"证件照","icon":"dingdanjihe","color":"#1296DB","num":""}, {"name":"照片冲印","icon":"dingdanchulizhong","color":"#FCC419","num":""}, {"name":"复印","icon":"dingdandaifukuan","color":"#FF6B6B","num":""}, ]

index.wxss样式

@font-face { font-family: 'iconfont'; src: url('data:font/woff2;charset=utf-8;base64,d09GMgABAAAAAAQIAA0AAAAACbAAAAOxAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGh4GYACCQhEICoZchU8LEAABNgIkAxYEIAWFAgdnGysIyI7DuOErcVWGmPzGw//P/ds+yc2DpEwKowoKSNURgG/+qmKSQEKCcJUEujOjR8d/WmvvDtXmUVQi/mepJzN7Ip4s4xkP0ZtaJFE6f9yrmjHBAvIyOC5r/kFZa9Ok7BYoQL1SLtYxl2CvYgWsaRfzSjNJ3yMvhIDPz2bkw5/m/l71tRUYhDEgE3IdISFDSuKmguxS9hE34OfjP3OjR6bIqRdffXBei5u/9/8+ypu2If+lQYAK0yiQIzKp+I9ZJEtgkmzTQJIEfx+1LX/vt+3YE1AA0SEAkSGD/54AXxptKwNdMASjIOZArAeQAJAkHZ0Zw7LHzUH7+OrsJCgTu3xc9qlZm83dy2OYtJ1R4kY13X79+kUnfFIq0N+PgTjryufPzdWODpxVg6+8pnlVDrr8JqrBMahUpqFFGZVCTMQhyqLJ+Q5t3Np/OZqk7YNHo9aLrtxr7pYlT9wnHqXqGXhQVTiorT2vcepHnrOgUqZz3DZRGVocH2yQSplXS3snlqJJlceKEVanYnT/9qFX3kaO6s2SjWlIscQjvJKa17sGx6Dehbc0/GI4X9Qfg1ecD2en3esDnRtZB+eT1CWD5vVIvQXvRzz1ly4xGidinMDdMTKmF5M14crkcFaRHNFawRxheAtrZfrW6e83n5fWk5XJEd8qckqW4f3NnjNJ70XfqYRs9533+BLlqwXvR5z3j20woqEpeEczm2PqiwIRjm39+uELvi9omU2tFCmpC7FNTDZsJTr8mlG3FOGtrZqDmptbHMd3/bkpQH4mIP2s+Km/mD07Vsc2VAqtTliCNvo/oZCkfb/5vLyeZn/5u3ZjzQAIBAt+P7m2a+ii/3tVsts6Waz9nDd5DXoyEOxqgtsTokYlC1JSJRbSsEcJdO2QCzKUALTsNcKvAIzUFEHoWQmZrkOQ6xkgJupTKFQ+QEfPTyjVsWjvysi4KRepj+kAEIYZg8wQmyA3jJWYqGkojHEAHcPcQ2mjv60q0+OwWQ6cisvh1Wqk5ufX07CyEFMueIwiOpyJDrdd0ECevyfW4mRuJioO+Fdeu/XbJ/wbcQ5O+spG3Tp0wVX2+rs7utoSVyy24BxbvIuTh6yHi4vQSHCwMmu00MdKzsTEqpFN8XcMOA2XDnhEk+z0yD0ul7guF72NLDo9lv232QQcHn5zNiM6dRIDmzpopkRw2YSI1qLzDvmBbRglu20XIYss8khRDD/XEn9hGa9zm/QBnTWGlGcEgl8v3Ea3jxSlIga9judpAAAA') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }

.iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.l-icon-dingdan:before { content: "\e899"; }

.l-icon-dingdanchulizhong:before { content: "\e896"; }

.l-icon-dingdandaifukuan:before { content: "\e897"; }

.l-icon-dingdanjihe:before { content: "\e898"; }

smileShirmy commented 2 years ago

这是因为 font-family: 'iconfont'; 和 Counter 组件的 font-family 命名冲突导致覆盖了,可以修改一下属性的值,比如 font-family: 'app-iconfont'; 等方式