Ich bin mir nicht sicher, wie ich diese Icons von Astrit Malsija nennen soll. Der Titel ist „500+ CSS Icons, Customizable, Retina Ready & API“ und die URL ist „css.gg“, aber sie haben eigentlich keine _Namen_.
Jedenfalls ist ihr Kniff
Die erste Icon-Bibliothek der Welt, entworfen per Code.
Die Idee ist, dass sie clip-path nicht verwenden, sie sind keine Icon-Fonts und nicht einmal SVG. Es sind im Wesentlichen nur <i>-Tags, die die Formen von CSS und bei Bedarf Pseudo-Elemente verwenden, um sich selbst zu zeichnen. Es ist ein sehr cleverer Ansatz. Sie werden super schnell gerendert, wie Inline-SVG, da sie keine weiteren Ressourcen benötigen. Sie skalieren nicht besonders gut, da alles in px dimensioniert ist, aber sie haben Modifier-Klassen für eine Handvoll vordefinierter Größen. Ich würde diese wahrscheinlich nicht produktiv einsetzen (Inline-SVG ist der richtige Weg), aber trotzdem ist es clever.
Ich würde es auch nicht als die erste der Welt bezeichnen. Nicolas Gallagher hat vor 10 Jahren (!) ein Icon-Set wie dieses entworfen.
Scheint, als wären sie nur in einer Größe erhältlich und könnten nicht vergrößert/verkleinert werden?
Es gibt anscheinend eine kleine Größeneinstellung. 4 vordefinierte Größen.
Um die Größe zu ändern, fügen Sie einfach einen beliebigen Wert zur Klasse oder direkt zum Icon hinzu. Ich verwende dafür benutzerdefinierte Variablen.
Die Größenanpassung funktioniert mit `transform` und als Fallback gilt 1 oder die tatsächliche Größe.
Es scheint, als hätte man die Skalierung ziemlich einfach handhaben können, indem man die Schriftgröße ihres Containers auf 10px setzt und dann ihre Größen mit `em` handhabt. Ändern Sie einfach die Basisgröße mit Ihrem Stylesheet und alles ist gut, oder?
Zähle mich zu den Leuten, die sagten, das könnte mit `em`-Einheiten gemacht werden (Standard ist normalerweise 1rem = 16px, und wenn es anders ist, möchte man wahrscheinlich, dass es in diesem Fall mit dem Text skaliert).
Das gesagt, finde ich, dass der nützlichste Teil dieser Icon-Sammlungen die zugrunde liegenden Techniken sind. Man weiß nie, wann etwas, das man gelernt hat, nützlich sein kann.