Wie kann ich verhindern, dass in meiner Liste ein zusätzliches Font Awesome-Symbol erscheint? ⇐ CSS

[Anonymous]

Frage
Ich arbeite an einem Bootstrap 5-Projekt mit SCSS und habe benutzerdefinierte Dienstprogramme für die Listengestaltung erstellt. Ich bin auf der Suche nach Feedback zu Best Practices und möglichen Verbesserungen meines Ansatzes.
Aktuelle Probleme
Neben dem farbigen wird ein zusätzliches weißes Symbol angezeigt. Ich muss dieses zusätzliche Symbol entfernen.
Aktuelle Implementierung
SCSS

Code: Select all

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

Hier ist der HTML-Code:

Code: Select all

[list]
[*]
Content 1
$VALUE

[*]
Content 2
$VALUE

[*]
Content 3
$VALUE

[*]
Content 4
$VALUE

[/list]