CSS Icon mit HG-Farbe

Hallo,
ich scheitere gerade an meinen nicht vorhandenen CSS-Kenntnissen.
Ich möchte die 3 Punkte in meinem Icon weiss haben, habe mich auch schon angenähert...komme aber mit der Postion nicht klar.
Kann mir jemand helfen?

https://eindruck.ein-druck.net/Kontakt.html

Vielen Dank im voraus

HG ist ganz unten im Code
-------------------------------------
.mod_quickmenu2 {
position: fixed;
bottom: 120px;
right: 18px;
z-index: 1000;
padding-top: 194px;
}

.mod_quickmenu2.quickmenu-align-top {
top: 45px;
bottom: auto;
}

.mod_quickmenu2 ul:hover li {
margin-top: 0;
}

.mod_quickmenu2 li {
display: block;
float: right;
clear: right;
}

.mod_quickmenu2 li a {
display: block;
overflow: hidden;
white-space: nowrap;
}

.mod_quickmenu2 li a i {
width: 40px;
transition: All 0.3s ease;
-webkit-transition: All 0.3s ease;
font-size: 40px;
}

.mod_quickmenu2 li a i:hover {
font-size: 45px;
}


.mod_quickmenu2.style3 li a {
color: #f09420;
z-index: 800;

}

.fa-commenting::after {
z-index: 600;
content: '';
display: block;
background-color: magenta;
height: 50px;
border-radius: 50%;
top: 45px;
}

Wenn es um das Font Awesome Icon geht, dann sieht es schlecht aus. Du kannst die Farbe des Icons ändern aber nicht die drei Punkte darin. Dafür müsstest du eine eigene svg erstellen.

Edit: hier scheint es eine Lösung dafür zu geben.
https://stackoverflow.com/questions/...ckground-color

OK,

jetzt habe ich das hier verwendet

.fa-commenting {
background: #FFF;
}

Wie kriege ich jetzt das ganze ohne Rechteck hin?

garnicht.. der Block ist ein Rechteck und du hast da ein Font Awesome Icon drin. Deswegen wird so immer ein Reckteck dahinter sein.
Am einfachsten wäre es wenn du dir ein Icon suchst wo du die Farben anpassen kannst. Schau hier: https://iconmonstr.com/ und such dir ein Icon.. pass es an und nutze das.

OK, aber mein erster Ansatz "Pink" scheint doch bis auf die Position schon fast zu passen....

Ja.
Wäre eine Lösung. Dafür müßte ein div um das Icon und den pinken Kreis. Der div muß position:relative sein mit Größe. Darin sind die beiden anderen div´s. Der Kreis kommt zu erst und ist auch position:relative;. Der zweite div ist das Icon mit position:absolute; und positioniert sich über dem Kreis.

Also ich sehe die Punkte weiss in der deiner Vorschau - da ja der Hintergrund weiss ist.

Solltest du aber mal einen anderen Hintergrund haben, dann könntest du auch 2 Icons übereinander legen.
Also das far-comments (in weiss) drunter und dann das fas-comments drüber (beliebige Farbe).

Da beim fas die Punkte "leer" sind, zeigt es dann die Farbe des far an.