Share
Ich mag soziale Ikonen, ich gebe es zu. Ich habe buchstäblich Dutzende Ich habe in den letzten Jahren einige Icons gesammelt, die ich in den letzten Jahren zusammengetragen habe, und sogar einige eigene Sets erstellt, um zu versuchen, die perfekte Anpassung an ein bestimmtes Projekt zu erreichen.
In letzter Zeit habe ich jedoch Symbol-Schriftarten entdeckt und diese alten Bildsymbole schon länger nicht mehr verwendet.
Stellen Sie sich Dingbats jeder Art und Art vor - soziale Symbole, Website-Symbole, alles, was Sie sich vorstellen können - nur sie sind keine Bilder: sie sind eigentlich Schriftarten.
Das ist eine große Sache, denn mit Bildsymbolen erhalten Sie statische Bilder. Möglicherweise erhalten Sie ein paar verschiedene Größen desselben Bildes, aber Sie können mit ihnen wirklich nichts anderes tun, als sie so zu verwenden, wie sie sind.
Ein Symbol, das eigentlich eine Schrift ist, ist ein ganz anderes Tier. Es stimmt zwar, dass die Icons einfacher aussehen, aber sie sind minimalistisch, da sie sehr anpassbar sind. Mit einer Symbolschriftart können Sie die Größe und Farbe eines Symbols einfach ändern (genau wie bei Textschriftarten!). Icon-Schriftarten verfügen außerdem über transparente Hintergründe, die in alten Versionen von Internet Explorer wirklich funktionieren, wenn Sie in einer alten Version von IE arbeiten.
Ein weiterer Vorteil ist, dass sie CSS-Image-Sprites ersetzen können. Die Verwendung einer benutzerdefinierten Symbolschriftart mit einer begrenzten Anzahl von Symbolen funktioniert ähnlich wie Bild-Sprites, bietet jedoch die Möglichkeit, Symbole wie Text zu formatieren.
Ob eine Symbolschriftart in Ihrem Projekt besser funktioniert als Bildsymbole, liegt bei Ihnen. Sie haben beide Vor- und Nachteile. Für unsere Zwecke setzen wir jedoch voraus, dass Sie bereit sind, Icon-Fonts auszuprobieren und wissen möchten, wie sie in einem WordPress-Design verwendet werden.
Für unser Tutorial stellen wir ein kleines Set von Icons für Social Media-Schriften für unser hypothetisches Projekt zusammen. Wir brauchen Icons für Facebook, Twitter und Pinterest, also machen wir uns auf den Weg.
Es gibt eine kleine Anzahl von Online-Symbolzeichensatzgeneratoren, mit denen Sie benutzerdefinierte Zeichensatzsätze nur für Sie erstellen können. Sie können benutzerdefinierte Zeichensätze projektbezogen erstellen. es ist so bequem! Hier verwenden wir die Generator-App von Icomoon, da dies der Dienst ist, den ich am häufigsten verwendet habe.
Der Fontgenerator von Icomoon macht Spaß und ist einfach zu bedienen - Sie können aus einer Reihe von Symbol-Fonts kostenlos und anderen kommerziellen wählen. Ich habe festgestellt, dass die Qualität der angebotenen Schriften sehr hoch ist. Sie können sogar Icon-Schriften hochladen, die Sie an anderer Stelle finden, und diese in Ihrer benutzerdefinierten Schriftart verwenden. Sehr praktisch.
Lassen Sie uns unsere benutzerdefinierte Social Media-Symbolschriftart erstellen. Ich gehe davon aus, dass Sie das noch nie gemacht haben, aber machen Sie sich keine Sorgen, wenn Sie nach vorne springen müssen. Wir werden aufholen.
Starten Sie die Icomoon-App in Ihrem Browser. Folgendes wird angezeigt:
Der kostenlose Satz der grundlegenden Icomoon-Schriftarten wird geladen. Möglicherweise werden auch einige andere kostenlose Symbolzeichensätze angezeigt. Ich empfehle, sich auch die anderen Sets anzusehen, die nicht geladen wurden, da Sie dort etwas finden, das Ihnen gefällt. Um die anderen verfügbaren Sets anzuzeigen, scrollen Sie nach unten und klicken Sie auf Weitere Icon-Sets.
Auf dem nächsten Bildschirm sehen Sie eine Reihe anderer freier und kommerzieller Schriften (Entypo ist ein wirklich schönes Set, das ich häufig verwende, nur zu Ihrer Information). Um eine dieser Optionen zum Hauptauswahlfenster hinzuzufügen, klicken Sie einfach auf Hinzufügen Taste unter diesem Satz.
Wenn Sie sich wieder im Hauptbildschirm befinden und ein Set entfernen möchten, klicken Sie auf das Menüsymbol oben rechts und dann auf Set entfernen.
Wenn Sie über eine eigene Symbolschriftart verfügen, die Sie möglicherweise von einem Client erhalten oder von einer anderen Website heruntergeladen haben, können Sie sie durch Klicken auf die Schaltfläche hochladen Symbole importieren am oberen Rand des Auswahlbildschirms und es werden die Symbole in Ihr Set geladen. Sie können die Zeichensatzauswahl in diesem Satz genau wie die nativen Icomoon-Zeichensatzsätze vornehmen.
Für unser Projekt suchen wir soziale Symbole für Facebook, Twitter und Pinterest. Viele der verfügbaren Sets verfügen über einige oder alle dieser Symbole. Wie wählen Sie dann aus??
Die Auswahl von Symbolen aus demselben Satz ist eine einfache Lösung - wenn ein Satz, der Ihnen gefällt (und der zu den Designanforderungen des Projekts passt), alle Symbole enthält, die Sie benötigen, ist das großartig. Verwenden Sie diese. Manchmal ist das jedoch nicht der Fall - vielleicht hat dieses Set kein Pinterest-Symbol oder das YouTube-Symbol ist ein wenig verrückt.
Wenn dies der Fall ist, wählen Sie aus verschiedenen Sets aus, aber seien Sie vorsichtig - Icomoon verwendet für jede Symbolschriftart eine Basisrastergröße; Für das Icomoon Free-Set ist das Raster 16. Sie erhalten die besten Ergebnisse (das schärfste Erscheinungsbild) in einem Browser, wenn Sie die Schriftgröße auf 16 oder ein Vielfaches von 16 einstellen.
Wenn Sie das bereits erwähnte Symbol für die Entypo-Schriftart betrachten, werden Sie feststellen, dass das Basisraster 20 ist. Dies bedeutet, dass Sie die Schriftgröße auf 20 oder ein Vielfaches davon setzen müssen, um die besten Ergebnisse zu erzielen. Wenn Sie Symbole aus Sätzen unterschiedlicher Basisrastergrößen mischen möchten, müssen Sie sie nur in Ihrem Browser überprüfen, um zu sehen, ob die Anzeigequalität akzeptabel ist. Sie können die Rastergrößen für alle Icomoon-Schriftarten anzeigen, indem Sie auf klicken Weitere Schriftarten anzeigen am unteren Rand des Hauptfensters der App.
In Anbetracht dieser Überlegung können Sie das Suchwerkzeug oben in der App verwenden, um nach Namen nach Symbolen zu suchen, sodass Sie mehrere Versionen desselben sozialen Symbols miteinander vergleichen können.
Natürlich können Sie auch einfach die Sets durchsuchen, was eine gute Möglichkeit ist, um eine Stunde Zeit zu verlieren.
Um Ihre Icons auszuwählen, klicken Sie einfach darauf. Sie werden automatisch zu Ihrem Set hinzugefügt. Wenn Sie fertig sind, klicken Sie auf die Schaltfläche Schriftart Wenn Sie auf die Schaltfläche unten klicken, werden alle Ihre Icons zum Download angezeigt. Drücke den Herunterladen Klicken Sie auf die Schaltfläche, um Ihre neue perfekte benutzerdefinierte Schriftart zu erhalten, und Sie sehen ein Textfeld, in dem Sie Ihre Schriftart benennen können. Normalerweise benenne ich sie für den Kunden, damit er sie gerade hält. In diesem Fall nenne ich es 'Tutorial'.
Was passiert, wenn Sie diese benutzerdefinierte Schriftart erstellen und der Kunde entscheidet, dass Sie im nächsten Monat beispielsweise Vimeo und Instagram zu ihren Social-Media-Links hinzufügen möchten? Müssen Sie bei Null anfangen??
Nein, das tust du nicht.
In Ihrem Download wird ein selection.json Datei, die alle Ihre Projekteinstellungen speichert. Sie müssen lediglich die Icomoon-App öffnen und auf klicken Symbole importieren Wenn Sie die JSON-Datei hochladen möchten, wird Ihre Auswahl erneut angezeigt. Sie fügen die neuen Symbole hinzu, erstellen die Schriftart neu und laden sie erneut herunter.
Nun kommen wir zu den schwierigsten Teilen.
Laden Sie die vier Dateien im hoch / Schriftarten Ordner Ihrer benutzerdefinierten Schriftart in eine / Schriftarten Ordner in Ihrem Design.
Öffne das style.css Datei in Ihrer benutzerdefinierten Schriftart und kopieren Sie die @Schriftart Ausschnitt, der so aussieht:
Accentsconagua
@ font-face font-family: 'Tutorial'; src: url ('fonts / tutorial.eot? 6npck9'); src: url ('fonts / tutorial.eot? # iefix6npck9') format ('embedded-opentype'), url ('fonts / tutorial.woff? 6npck9') format ('woff'), url ('fonts / tutorial.) ttf? 6npck9 ') format (' truetype '), url (' fonts / tutorial.svg? 6npck9 # tutorial ') format (' svg '); Schriftgewicht: normal; font-style: normal; Dann in deinem Motto style.css Datei, fügen Sie dieses Snippet ein. Denken Sie daran, die URL, unter der sich die Schriftarten in Ihrem Design befinden, zu ändern, wenn Sie etwas anderes als das Verzeichnis "Schriftarten" verwenden.
Dafür gibt es zwei Hauptmethoden: Eine verwendet eine Klasse für jedes Symbol, um sie als Pseudo-Elemente hinzuzufügen (dies ist das, das ich verwende), und das andere verwendet ein Datenattribut, um sie als tatsächliche Elemente im HTML-Code hinzuzufügen.
Hier ist ein Beispiel für die Verwendung der Class-per-Icon-Methode in einer ungeordneten Liste. Nehmen wir an, wir haben eine Funktion, die eine Reihe sozialer Symbole in der Kopfzeile Ihres Designs platziert. Diese Screenshots zeigen einige Beispiele, wie Sie dies verwenden können.
Geh in dein Motto Functions.php Datei und fügen Sie diesen Code hinzu:
Gehen Sie dann zurück in die style.css-Datei Ihrer benutzerdefinierten Symbolschriftart und kopieren Sie den folgenden Ausschnitt:
[class ^ = "icon-"], [class * = "icon-"] font-family: 'tutorial'; sprich: keine; font-style: normal; Schriftgewicht: normal; Schriftvariante: normal; Text-Transformation: keine; Zeilenhöhe: 1; / * Bessere Schriftdarstellung =========== * / -webkit-Schriftartenglättung: Antialiasing; -moz-osx-Schriftartenglättung: Graustufen; .icon-facebook: before content: "\ e600"; .icon-twitter: before content: "\ e601"; .icon-pinterest: before content: "\ e602";
Fügen Sie dieses Snippet in Ihr Theme ein style.css Datei. Wenn alles wie geplant verläuft, sollten Sie jetzt drei Symbole in Ihrer Kopfzeile haben. Sie können Farbe, Größe und andere Attribute wie Text ändern.
In Chrome treten manchmal Probleme beim Rendern von Symbolschriftarten auf. Wenn sie in Chrome abgehackt aussehen, versuchen Sie, Ihre neu zu ordnen @Schriftart Schnipsel wie folgt mit SVG nach EOT:
@ font-face font-family: 'Tutorial'; src: url ('fonts / tutorial.eot? 6npck9'); src: url ('fonts / tutorial.eot? # iefix6npck9') format ('embedded-opentype'), url ('fonts / tutorial.svg? 6npck9 # tutorial') format ('svg'), url ('fonts / tutorial.woff? 6npck9 ') format (' woff '), url (' fonts / tutorial.ttf? 6npck9 ') format (' truetype '); Schriftgewicht: normal; font-style: normal; Die andere Methode zum Einfügen von Symbolen in das Design besteht im Verwenden von Datenattributen, um sie als Elemente einzufügen. Ich bin kein großer Fan dieser Methode, weil sie bedeutet, dass das Symbol in den HTML-Code eingefügt wird, und ich fand es verwirrender. Aber jetzt geht es los. Vielleicht finden Sie eine Methode mehr als die andere.
Im Functions.php, Sie verwenden Datenattribute wie folgt:
Und in deinem Motto style.css:
[data-icon]: before font-family: 'tutorial'; Inhalt: attr (Daten-Icon); sprich: keine; Schriftgewicht: normal; Schriftvariante: normal; Text-Transformation: keine; Zeilenhöhe: 1; -webkit-font-smoothing: antialiased;
Nun kennen Sie die Grundlagen zum Erstellen und Verwenden von benutzerdefinierten Symbolschriftarten in Ihrem WordPress-Design - nicht allzu schwierig. Finden Sie einige Symbole, die Sie mögen, und versuchen Sie es bei Ihrem nächsten Projekt.
Hier sind einige Ressourcen für den nächsten Schritt. Wer weiß; Möglicherweise entwerfen Sie Ihre eigene Symbol-Schriftart zu einem bestimmten Zeitpunkt, wenn Sie einfach nicht die richtige Schriftart für dieses Projekt finden.
Andere Orte zum Erstellen benutzerdefinierter Symbolschriftarten:
Wenn Sie weitere Informationen zur Verwendung von Datenattributen wünschen, bietet CSS Tricks eine gute Übersicht.
