Как я могу предотвратить появление дополнительного значка Font Awesome в моем списке? ⇐ Html

[Anonymous]

Вопрос
Я работаю над проектом Bootstrap 5 с использованием SCSS и создал собственные утилиты для стилизации списков. Мне нужны отзывы о лучших практиках и потенциальных улучшениях моего подхода.
Текущие проблемы
Рядом с цветным отображается дополнительный белый значок. Мне нужно удалить этот лишний значок.
Текущая реализация
SCSS
// Custom list styles with FontAwesome icons
.no-bullets, .list, .square-list {
li {
list-style: none;
a {
text-decoration: none;
padding-left: .5rem;
}
}
& .square-list li::before {
content: '\f0c8';
font-family: FontAwesome;
display: inline-block;
margin-left: calc(var(--icon-space) * -1);
}
& .solid li::marker {
font-weight: 900;
}
}

// Dynamic color classes from Bootstrap theme colors
@each $color, $value in $theme-colors {
.marker-#{$color} {
li::before {
color: #{$value};
}
}

.li-#{$color}::before {
color: #{$value};
}
}

Вот HTML:

• Content 1
  $VALUE
• Content 2
  $VALUE
• Content 3
  $VALUE
• Content 4
  $VALUE

Подробнее здесь: https://stackoverflow.com/questions/798 ... in-my-list