Ich entwerfe Mockups in Sketch, und ich benutze die Startseite und Suchsymbole von einer UI-Schriftart für Symbole. Jetzt möchte ich diese Icons in meiner eckigen App mit html und css anzeigen. Es scheint keine Ressource online zu geben, die lehrt, wie dies zu tun ist. Ich habe Ressourcen wie FontAwesome verwendet, vor denen eine sehr klare Dokumentation darüber ist, wie das gemacht wird.Wie UI Schriftart Symbole in einer eckigen App verwenden
habe ich es durch Kopieren der CSS-Attribute des Symbols mit einem rechten Mausklick innerhalb der Skizze zu arbeiten:
/* home: */
font-family: UIFont-Solid;
font-size: 30px;
color: #FFFFFF;
So fügen Sie diese zu Ihrer CSS:
.icon {font-family: UIFont-Solid; font-size: 30px; color: #FFFFFF;}
Dann alles, was Sie müssen tun in der html/view ist die klasse zum element hinzufügen und den namen des symbols als text innerhalb des elements:
<div class="icon">home</div>
Sie können sogar mehrere Symbole in der gleichen div setzen: mit @ font-face
<div class="icon">home search help</div>
Beachten Sie, dass diese nicht in der Produktion arbeiten kann, wenn Sie die Schriftart in den Fonts Ordner hinzufügen und es in der CSS-Referenz.