unschöne Nebeneffekte durch letter-spacing

[Gunnar Bittersmann]

@@JürgenB

☞ Custom properties FTW.

ich habe jetzt meine Testseite überarbeitet. Da die Symbole per Javascript erzeugt werden, habe ich sie (erst mal?) direkt per innerHTML in den Button gesetzt.

Du könntest trotzdem mit use arbeiten.

Aber bei mir wie auch in deinem Codepen verstehe ich nicht, wie man die Größe und die Höhe der SVGs bezogen auf den Text beeinflusst. Wenn ich height ändere, wird das Symbol vertikal verschoben, die Größe bleibt aber. Wie kann ich denn die Lage und die Größe der SVGs verändern?

Durch Setzen von width und height, ja. In deinem Fall für .sortbutton svg. Das überschreibt dann die width="1em" height="1em"-Angabe im SVG (die womöglich gar nicht da sein sollte). Ist das beabsichtigt, dass da ein anderes Seitenverhältnis vorliegt als bei viewBox="0 0 180 100"?

Wo wie bei der ViewBox sind: deine ist zu knapp bemessen. Die Hälfte der Strichbreite der horizontalen Linien passt nicht mehr mit rein (Nachtrag: wenn man width und height im Verhältnis 9 : 5 wählt). Die Linien sind nur halb zu sehen und damit dünner als die schrägen.

Zur vertikalen Ausrichtung dürfte es genügen, vertical-align: sub zu entfernen.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!