Symbolschriftarten sind für Ihre Website fantastisch: Hier ist der Grund

Werbung

Sie haben von Symbolen gehört, und Sie haben mit ziemlicher Sicherheit von Schriftarten gehört, aber was ist das? Symbol Schriftart? Heute zeige ich Ihnen, was Symbolschriftarten sind und wie Sie sie verwenden können, um Ihre Website zu beleben. Lass uns anfangen.

Was sind Symbolschriftarten?

Symbolschriftarten sind genau die gleichen wie „normale“ Schriftarten - sie definieren das Erscheinungsbild eines Textstücks. Der große Unterschied besteht darin, dass Symbolschriftarten keine Buchstaben und Zahlen enthalten, sondern Symbole und Symbole. Das könnte Sie verwirren, denn was nützt eine Schrift, wenn Sie Ihrer Mutter keine Briefe schreiben können!

Symbolschriftarten werden hauptsächlich zum Gestalten von Websites verwendet. Da sie vektorbasiert sind, können sie mithilfe von geändert, verschoben, gestaltet und geändert werden CSS 5 kleine Schritte zum Erlernen von CSS und zum Kick-Ass-CSS-ZaubererCSS ist die wichtigste Veränderung, die Webseiten im letzten Jahrzehnt erlebt haben, und es hat den Weg für die Trennung von Stil und Inhalt geebnet. Auf moderne Weise definiert XHTML die semantische Struktur ...

Weiterlesen . Dies bietet einen großen Vorteil gegenüber herkömmlichen Entwurfsmethoden wie Bildern. Das Erscheinungsbild einer großen Anzahl von Symbolen kann mit nur wenigen Codezeilen geändert werden. Sie müssen keine Bilder bearbeiten, Photoshop öffnen oder die neuen Dateien hochladen - Sie schreiben einfach Code.

Beginnen

Ich werde verwenden Font Awesome Für diese Beispiele kann die Theorie jedoch auf viele andere Schriftpakete angewendet werden.

Hier ist der Starter-HTML-Code:

Dies ist die Mindestmenge an HTML, die zum Erstellen einer Webseite erforderlich ist. Ich werde den Großteil davon nicht erklären, da wir dies in unserem Leitfaden am behandelt haben wie man eine Website macht.

Die wichtigste Zeile ist die folgende:

Dadurch wird das Font Awesome-Stylesheet von seinem geladen CDN. Ohne diese Zeile würde Ihre Website nicht wissen, was Font Awesome ist. Daher ist dies sehr wichtig. Dieses Stylesheet erledigt die harte Arbeit beim Einbetten von Web-Schriftarten und erleichtert Ihnen die Arbeit im Allgemeinen erheblich.

Font Awesome-Symbole werden durch hinzugefügte CSS-Klassen definiert ich Stichworte. Diese wurden ausgewählt, da ihnen kein Browser oder standardmäßig definiertes Styling zugeordnet ist, sodass Ihre Symbole nicht völlig durcheinander geraten. Alternativ können Sie die Klassen hinzufügen Spanne Tags, aber das bringt Ihren HTML-Code durcheinander.

Hier ist die grundlegende Verwendung. Steck das in dein Körper Stichworte:

 Meine erste Ikone

So sieht das aus:

Wie einfach war das Lassen Sie es uns zusammenfassen. Es sind zwei Klassen erforderlich, damit Font Awesome funktioniert. Der erste heißt Fa, was für Font Awesome steht. Dies wird für jedes Symbol benötigt, unabhängig davon, welches Sie verwenden. Die zweite Klasse gibt das Symbol an, das Sie verwenden möchten - dies kann alles sein, ein Flugzeug, eine Person oder eine Kreditkarte. Diesem wird auch vorangestellt Faund da dies ein Zahnradsymbol ist, heißt es fa-cog. Sie können eine Liste aller anzeigen Symbole in Font Awesome auf ihrer Website.

Versuchen Sie, das Symbol vom Zahnrad auf ein anderes zu ändern.

Tiefer gehen

Sobald Sie die Grundlagen kennen, ist es Zeit für einige fortgeschrittene Tricks.

Wenn Sie kein eigenes CSS schreiben möchten, können Sie die direkt in Font Awesome integrierten Stile verwenden. Es gibt viele Klassen, mit denen Sie Symbole vergrößern können:

Eine weitere nützliche Klasse ist die fa-spin. Dadurch werden die Symbole gedreht, und in Kombination mit den vorherigen Größenklassen können Sie einige schöne Effekte erzielen. Hier ist der Code:

Hier ist das Ergebnis:

Es ist einfach, Symbole zu drehen fa-drehen Klasse:

Die Zahl am Ende definiert die Rotationsgrade für das Symbol, lässt sich jedoch nicht mitreißen. Sie sind beschränkt auf 90, 180, oder 270.

Ein letzter Trick, den Sie machen können, ist das Stapeln. Das fa-stack Mit class können Sie zwei oder mehr Symbole miteinander kombinieren. Hier ist der Code:

So sieht das aus:

Sobald Sie anfangen, all diese verschiedenen Klassen zu kombinieren, sind die Möglichkeiten wirklich endlos.

Benutzerdefinierte CSS

Weil Symbolschriftarten sind gerade Schriftarten können Sie mit CSS wie jedes andere Element formatieren. Die Verwendung von ein wenig CSS3 kann viel bewirken:

Hier ist der HTML-Code für dieses Symbol:

Hier ist das CSS:

@keyframes move {from {margin-left: 0; } bis {Rand links: 400px; } } .bike {Animationsname: move; Animationsdauer: 4s; }

Dieses CSS ist recht einfach, hat aber große Auswirkungen. Dies ist jedoch kein CSS-Tutorial CSS lernen 10 einfache CSS-Codebeispiele, die Sie in 10 Minuten lernen könnenMöchten Sie mehr über die Verwendung von CSS erfahren? Probieren Sie zunächst diese grundlegenden CSS-Codebeispiele aus und wenden Sie sie dann auf Ihre eigenen Webseiten an. Weiterlesen wenn Sie mehr über das Innenleben wissen wollen.

Sie können einige besondere Dinge tun, wenn Sie wirklich wollen:

Dies ruckelt ein wenig, um die Dateigröße für das Web zu reduzieren. Hier ist der HTML-Code:

Hier ist das CSS:

@keyframes verblassen {von {Deckkraft: 0; } bis {Deckkraft: 1; } } .person {Deckkraft: 0; Animationsname: Fade; } # p1 {Farbe: rot; Animationsdauer: 2s; } # p2 {Farbe: orange; Animationsdauer: 4s; } # p3 {Farbe: grün; Animationsdauer: 6s; } # p4 {Animationsdauer: 8s; }

Wie im vorherigen Beispiel werden hier CSS3-Animationen verwendet. Eine Animation namens verblassen wird erstellt und jedes Personensymbol implementiert diese Animation mit unterschiedlichem Timing. Mit diesen Symbolen und CSS3 gibt es viel Potenzial.

Das ist alles für heute. Sie sollten jetzt in der Lage sein, Icon Fonts zu verwenden, um Ihre Website zu beleben! Wenn Sie sich Ihrer Fähigkeiten noch nicht so sicher sind, sehen Sie sich diese an CSS-Vorlagenseiten 11 CSS-Vorlagenseiten: Beginnen Sie nicht bei Null!Es sind Tausende kostenloser CSS-Vorlagen online verfügbar, die alle moderne Designtrends und -technologien berücksichtigen. Sie können sie in ihrer ursprünglichen Form verwenden oder anpassen, um sie zu Ihren eigenen zu machen. Weiterlesen oder diese YouTube-Kanäle, um loszulegen Möchten Sie Webdesign lernen? 7 YouTube-Kanäle für den EinstiegYouTube bietet Tausende von Videos und Kanälen für Webdesign-Anfänger. Hier sehen wir uns einige der besten für den Einstieg an. Weiterlesen mit Webdesign.

Hast du heute etwas Neues gelernt? Was ist Ihre Lieblingssymbolschrift? Lass es uns in den Kommentaren unten wissen!