Icons mit Schriftgröße steuern

Avatar of Robin Rendle
Robin Rendle am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Hier ist ein raffinierter Trick von Andy Bell, der jetzt im Nachhinein etwas offensichtlich erscheint: Wenn Sie einem SVG eine Breite und Höhe von 1em geben, können Sie die Größe mit der CSS-Eigenschaft font-size ändern.

Versuchen Sie, die font-size im body-Element unten zu ändern, um zu sehen, wie sich das Icon mit dem Text skaliert.

Sehen Sie den Pen
Font size controlled icon
von Andy Bell (@andybelldesign)
auf CodePen.

Sie möchten Ihre Icons so gut wie immer mit Text ausrichten, und dieser Trick hilft, indem er diese inhärente Beziehung in Ihrem Code herstellt. Ziemlich raffiniert, oder?

Direkter Link →