Могу ли я использовать 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, чтобы изменить размер (16px в соответствии с другими значками) вашего значка.

А также вам нужно изменить padding: 40px 10px 0px;

Хороший улов поМадху Джаярама.

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

Пожалуйста, измените отступы. Я уменьшил его вдвое.