Icon-Schriften sind fantastisch für Ihre Website Hier ist der Grund

Sie haben von Symbolen gehört, und Sie haben fast sicher von Schriftarten gehört, aber was ist ein Symbolschriftart? Heute zeige ich Ihnen, welche Symbolzeichensätze verwendet werden und wie Sie diese verwenden können, um Ihre Website zu beleben. Lass uns anfangen.

Was sind Icon-Schriften??

Icon-Schriftarten sind genau die gleichen wie “regulär” Schriftarten - sie definieren das Aussehen und Verhalten eines Textes. Der große Unterschied besteht darin, dass Symbolschriften keine Buchstaben und Zahlen enthalten, sondern Symbole und Symbole. Sie könnten verwirrt sein, denn was ist 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 in der Größe verändert, verschoben, formatiert und geändert werden, indem Sie CSS-Schritte verwenden, um CSS zu lernen und ein Kick-Ass-CSS-Zauberer zu werden. 5 Baby-Schritte, um CSS zu lernen und ein Kick-Ass-CSS-Zauberer zu werden, ist CSS Die wichtigsten Änderungswebseiten haben im letzten Jahrzehnt gesehen und den Weg für die Trennung von Stil und Inhalt geebnet. Auf moderne Art definiert XHTML die semantische Struktur… Lesen Sie mehr. Dies bietet einen großen Vorteil gegenüber herkömmlichen Entwurfsmethoden wie Bildern. Das Aussehen und Verhalten 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 nur Code.

Fertig machen

Ich werde Font Awesome für diese Beispiele verwenden, aber die Theorie kann auf viele andere Font-Packs angewendet werden.

Hier ist der HTML-Starter:

Dies ist die Mindestmenge an HTML, die zur Erstellung einer Webseite erforderlich ist. Ich werde nicht die Mehrheit erklären, da wir dies in unserem Leitfaden zur Erstellung einer Website behandelt haben.

Die wichtigste Zeile ist folgende:

Dadurch wird das Font Awesome-Stylesheet von seinem CDN geladen. Ohne diese Zeile würde Ihre Website nicht wissen, was Font Awesome ist. Es ist also sehr wichtig. Dieses Stylesheet erledigt die harte Arbeit beim Einbetten von Webfonts und macht es Ihnen im Allgemeinen einfacher.

Font Awesome Icons werden durch hinzugefügte CSS-Klassen definiert ich Stichworte. Diese wurden ausgewählt, da an sie kein Browser oder ein standardmäßig definiertes Styling angehängt ist, sodass Ihre Symbole nicht durcheinander geraten. Alternativ können Sie die Klassen hinzufügen Spanne Tags, aber das stört Ihre HTML.

Hier ist die grundlegende Verwendung. Legen Sie dies in Ihre Karosserie Stichworte:

 Mein erstes Icon

So sieht das aus:

Wie einfach war das? Lass es uns brechen. Für Font Awesome sind zwei Klassen erforderlich. Der erste heißt Fa, das steht für Font Awesome. Dies ist für jedes Symbol erforderlich, 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. Dies ist auch mit vorangestellt Fa, und da dies ein Zahnrad-Symbol ist, heißt es fa-cog. Sie können eine Liste aller Symbole in Font Awesome auf ihrer Website anzeigen.

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

Tiefer gehen

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

Wenn Sie kein eigenes CSS schreiben möchten, können Sie die 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 drehen sich die Symbole 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 - verwenden Sie die fa-drehen Klasse:

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

Ein letzter Trick ist das Stapeln. Das fa-stack In dieser Klasse können Sie zwei oder mehr Symbole miteinander kombinieren. Hier ist der Code:

So sieht das aus:

Sobald Sie alle diese verschiedenen Klassen kombiniert haben, sind die Möglichkeiten wirklich endlos.

Benutzerdefinierte CSS

Weil Icon-Schriften sind gerade Schriftarten können Sie wie in jedem anderen Element mit CSS gestalten. Ein wenig CSS3 kann einen langen Weg gehen:

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

Hier ist das CSS:

@keyframes bewegen von margin-left: 0;  an Rand links: 400px;  .bike animation-name: move; Animationsdauer: 4s; 

Dieses CSS ist ziemlich einfach, hat aber einen großen Einfluss. Dies ist jedoch kein CSS-Tutorial, daher möchten Sie vielleicht CSS lernen. Die nächsten Schritte auf dem Weg zum CSS-Jedi-Meister Die nächsten Schritte auf dem Weg zum CSS-CSS Jedi-Master CSS ist absolut eine der wichtigsten Technologien, die es gibt Im Internet heute, und obwohl die meisten Leute zugeben, ein wenig HTML zu kennen, sind wir im Allgemeinen ahnungslos, was CSS angeht. Letztes Mal habe ich Sie vorgestellt. Lesen Sie mehr, wenn Sie mehr über die inneren Abläufe erfahren möchten.

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

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

Hier ist das CSS:

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

Wie im vorherigen Beispiel werden CSS3-Animationen verwendet. Eine Animation namens verblassen erstellt, und jedes Personensymbol implementiert diese Animation mit unterschiedlichen Zeitpunkten. Es gibt viel Potenzial, mit diesen Icons und CSS3 wild zu gehen.

Das ist alles für heute. Sie sollten jetzt Icon-Fonts verwenden können, um Ihre Website lebendiger zu gestalten! Wenn Sie sich Ihrer Fähigkeiten noch nicht so sicher sind, besuchen Sie diese CSS-Vorlagenseiten. 11 CSS-Vorlagenseiten: Starten Sie nicht von vorne! 11 CSS-Template-Sites: Beginnen Sie nicht von vorne! Es gibt Tausende von kostenlosen CSS-Vorlagen, die online verfügbar sind und moderne Trends und Technologien unterstützen. Sie können sie in ihrer ursprünglichen Form verwenden oder sie an Ihre eigenen Bedürfnisse anpassen. Weitere Informationen oder diese YouTube-Kanäle, um zu beginnen. Möchten Sie Webdesign lernen? 7 YouTube-Kanäle für den Einstieg Möchten Sie Webdesign lernen? 7 YouTube-Kanäle zum Einstieg YouTube bietet tausende Videos und Kanäle für Anfänger im Webdesign. Hier betrachten wir einige der besten für den Einstieg. Lesen Sie mehr mit Webdesign.

Hast du heute etwas Neues gelernt? Was ist deine Lieblings-Icon-Schriftart? Lass es uns in den Kommentaren wissen!

Erfahren Sie mehr über: CSS, HTML, Webdesign.