Symbolhintergrund innerhalb eines Containers im Bootstrap ⇐ HTML

[Anonymous]

Ich habe ein Beispiel dafür, was ich erreichen möchte.

Wie Sie sehen können, gibt es in dieser Pille auf der rechten Seite ein kleines Aktualisierungssymbol, das eine eigene Farbe und Hintergrundfarbe hat. Ich habe versucht, mit Bootstrap so etwas zu erreichen, aber ich kann den Hintergrund einfach nicht auf die richtige Größe einstellen, ohne das Symbolelement selbst viel zu groß für den Container zu machen.
Das kommt dem am nächsten Habe ich derzeit, aber das sieht bei weitem nicht so gut aus wie auf dem Beispielbild. Kann das mit besserem CSS behoben werden oder sind diese Symbole einfach nicht für diesen Zweck geeignet?

Code: Select all

.buttonContainer {
font-size: large;
}

.badge {
font-weight: 500 !important;
border-color: #adb5bd !important;
}

.icon {
display: inline-block;
border-radius: var(--bs-border-radius-pill) !important;
background-color: lightgray;
color: var(--bs-secondary);
}

.toBig {
padding: 5px;
}

Code: Select all

Background to small
Test test test [/i]

Test test test [i][/i]

Background ok but icon itself to big
Test test test [i][/i]

Test test test [i][/i]