Ich bin mir nicht sicher, welche Methode besser ist und welche die einfachste Übergabe an einen Entwickler ermöglicht.
Wenn nicht, dann geben Sie ihnen das Bild-Asset (vorzugsweise als SVG!)
Die Antwort hängt vom Kontext des Symbols im Design ab. Es erfordert ein wenig Wissen darüber, wie Entwickler Designs betrachten und worauf es ihnen bei der Implementierung ankommt. Der Entwickler ist am Ende des Tages wahrscheinlich mehr an Best Practices als an der Designtreue interessiert, obwohl es seine/ihre Aufgabe ist, beides so harmonisch wie möglich zu vereinen. Da ist es schön, wenn wir Designer ihnen ein wenig auf die Sprünge helfen können.
Es gibt viele Arten von Elementen in HTML : Blockebene und Inline sind die wichtigsten Anzeigekontexte, die hier im Spiel sind. Es gibt auch andere, wie Inline-Block, Flex, Grid und mehr. Ein Entwickler muss sich Ihr Design ansehen und den Kontext jedes Teils erraten, indem er HTML-Tags und/oder CSS-Stile verwendet, um den Anzeigetyp des gerenderten Elements an seinen Verwendungskontext anzupassen.
Dies hat sowohl visuelle als auch semantische Auswirkungen. Beispielsweise erlaubt ein Element auf Blockebene nicht von Natur aus, dass andere Elemente Seite an Seite mit ihm leben, und es impliziert auch einen Abschnitt mit einem breiteren Umfang/Bedeutung als ein Inline-Element.
Wenn Sie ihnen eine Schriftdatei geben, die Symbole als Zeichen enthält, holen die Entwickler sie vom Server und rendern sie inline neben Text. Dies ist nicht nur semantisch korrekt, sondern optimiert auch das Herunterladen der Symbole: Ein kleiner Download gibt dem Client den gesamten Satz, im Gegensatz zu mehreren kleinen Downloads für jeden. Größenmäßig ist der Unterschied marginal, aber die optimale Webseite stellt so wenig Anfragen wie möglich an den Server.
Das Obige funktioniert am besten, wenn Sie eine gut gemachte Symbolschrift verwenden, z. B. die Materialsymbole von Google. Es gibt jedoch viele zur Auswahl. FontAwesome ist ein weiteres gutes. Dienste wie icomoon und das Substantivprojekt sind wunderbare Quellen für gute Symbole, die von Hand ausgewählt und dann als Schriftartdateien verpackt werden können.
Ich stimme der Antwort von @ColinAzeltine nicht unbedingt zu, da es keinen Grund gibt, warum ein Entwickler die Zeilenhöhe oder das Auffüllen eines Inline-Elements nicht festlegen kann (es erfordert, dass es als Inline-Block angezeigt wird, was, wenn Sie den Abstand eingeschlossen hätten, das heißt untypisch für normal gesetzten Text, ist ohnehin die semantisch richtige Wahl). Wenn die Icon-Schrift gut gemacht ist, müssen Sie sich keine Gedanken über die Zeilenhöhe machen.
Ich finde Icon-Fonts ziemlich genial. Ich arbeite sehr gerne mit ihnen zusammen und finde das in den meisten Fällen auch völlig in Ordnung. Sie haben jedoch einen großen Nachteil.
Eine Icon-Schriftart ist genau wie jede andere Schriftart, die Sie möglicherweise verwenden, aber sie besteht buchstäblich nur aus Symbolen.
Ich arbeite als leitender Designer und Entwickler, und wenn ich in Sketch designe und weiß, dass ich dasselbe Projekt entwickeln werde, stelle ich immer sicher, dass meine Zeilenhöhen bei Symbolschriften auf den gleichen Wert wie die Schriftgröße eingestellt sind.
Das Problem liegt in der Zeilenhöhe. Wenn einige Entwickler Ihre Datei öffnen und nach Größen-/Pixelwerten suchen, bemerken sie möglicherweise nicht, ob zwischen Ihren Symbolen und anderen Elementen in Ihrem Design zusätzliche „Paddings“ vorhanden sind.
Einfach gesagt, wenn Sie die Zeilenhöhe jedes Ihrer Symbole nicht manuell festlegen möchten, verwenden Sie stattdessen ein Vektorsymbol (umrandet). Die einzige Ausnahme hiervon könnte FontAwesome/Black Tie sein. Ich bin mir nicht sicher, ob sie standardmäßig auf eine Zeilenhöhe von 1 eingestellt sind.
Scribblemacher