我可以使用CSS将较大的图标替换为较小的图标吗？

Question

我有一个WordPress网站，当您滚动时会更改购物车图标。在其原始状态下，将显示一个非常大的图标。滚动时，将显示一个更小，更理想的图标。我想一直用较小的图标替换较大的图标，但是我在代码中定位较大的图标时遇到了麻烦。如何始终替换较大的图标？我的网站是https://pennwoods.com。

我已经在Chrome中打开了开发工具，并定位了每个div。当我做出影响较大图标的更改时，它似乎对较小的图标具有相同的效果。我是CSS新秀。

def b32Keys(self):
    privateKey = PrivateKey.random()
    private = privateKey.wif(compressed=True)
    publicKey = privateKey.to_public()
    bech32 = publicKey.to_address('P2WPKH')
    genQR = qrcode.make(bech32)
    genQR.save("qr.jpg")
    self.main_widget.ids.qr.reload()

我希望较小的图标始终显示在大图标上。

Answer 1

将font-size中的before更改为图标大小（16px以匹配其他图标）。

而且您还需要更改padding: 40px 10px 0px;

Madhu Jayarama的妙招。

.top-form.top-form-minicart .top-minicart-icon:before {
  font-size: 15px;
}

.top-form.top-form-minicart .top-minicart-icon .minicart-number {
  right: 0px;
}

.top-form.top-form-minicart {
  padding: 40px 10px 0px;
}

Answer 2

.top-form.top-form-minicart {
   padding: 6px 5px 1px 1px;
}
.top-form.top-form-minicart {
   cursor: pointer;
   padding: 13px 12px 9px;
   background: #617348;
   -webkit-border-radius: 0 6px 6px 0;
   -moz-border-radius: 0 6px 6px 0;
   -o-border-radius: 0 6px 6px 0;
   -ms-border-radius: 0 6px 6px 0;
   border-radius: 0 6px 6px 0;
}

请更改填充。我将其减少了一半。