需要帮助将大图标替换为较小的图标-CSS吗？

Question

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

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

element.style {
    /* display: none; */
}
.top-form.top-form-minicart {
    padding: 12px 10px 1px 1px;
}
.top-form.top-form-minicart {
    cursor: pointer;
    padding: 26px 24px 18px;
    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;
}
.top-form {
    position: relative;
    float: right;
}
.pull-right {
    float: right;
}
.pull-right {
    float: right;
}
.pull-right {
    float: right;
}
.pull-right {
    float: right;
}
*, html {
    outline: 0!important;
}
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


div {
    display: block;
}

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

Answer 1

更改font-size中的before以调整图标大小。

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

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;
}

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