Symbolschriftarten werden verwendet, um bestimmte Standardsymbole in Ihren Website-Inhalt aufzunehmen. Die Schriftart 'Super' ist ein gutes Beispiel, das viele Vorteile gegenüber anderen Icon-Fonts bietet. Wir empfehlen auch die Verwendung Symbolschriftarten von Freepik als gute Alternative.
Font Awesome wurde ursprünglich von entworfen David Gandy zum Gebrauch mit Twitter Bootstrap. Font Awesome kann mit WordPress unter Verwendung von verwendet werden Font Awesome Icons-Plugin gestaltet von Rahel Baker.
Hier ist eine kurze Einführung in solche Schriftarten und wo die Awesome-Schrift in einen Stil passt, der möglicherweise noch in den Kinderschuhen steckt.
Warum Icon-Fonts verwenden?
Bei der Gestaltung einer Website beanspruchen Bilder aufgrund ihrer Dateigröße viel Webspace. Sie müssen auch über HTML-Markup auf Ihren Webseiten aufgerufen werden. Darüber hinaus ist ihre Skalierung häufig ein Problem, da sie mit zunehmender Größe an Definition verlieren. Ein normales Bild wird nur dann wie beabsichtigt aufgelöst, wenn es in seinen ursprünglich entworfenen Abmessungen verwendet wird.
Wenn Sie nach Standardsymbolbildern suchen, z. B. für Fahrzeuge, bestimmte Satzzeichen oder grafische Diagrammsymbole, können Symbolschriftarten skalierbare Bilder bieten, die unabhängig von der Schriftgröße gleich aussehen. So erscheinen Buchstaben und Zahlen gleich, egal ob Sie die Schriftgröße 2 oder 5 oder 10 oder 24 Punkt verwenden.
In vielen Fällen verwenden Menschen aufgrund dieses Problems einfach keine Bilder, und ihr Artikel oder Online-Bericht leidet darunter an Details oder Klarheit. Durch die Verwendung von Font Awesome können sie ihren Websites grundlegende Symbole hinzufügen und sie auf die erforderliche Größe skalieren, die nur durch die Abmessungen ihrer Dokumente begrenzt ist – und dies ohne Verlust der Definition. Sie können skalierbare Symbole genauso betrachten wie skalierbare Schriftzeichen.
Hier ist eine Auswahl der verfügbaren Videoplayer und sozialen Symbole:
Und auch die neuen Icons, die mit Version 3.0 kommen:
Jeder von diesen kann ohne Verlust an Definition vergrößert werden. Sie können ihre Farbe ändern und ganz einfach Schatten hinzufügen und ihre Transparenz ändern. Tatsächlich können Sie alles mit ihnen machen, was Sie mit Bildern können, und noch mehr, ohne die Nachteile der Dateigröße.
Das ist im Grunde das, was Icon-Fonts tun können, und insbesondere die Awesome-Schrift. Hier einige Informationen, wie Sie sie verwenden und optimal nutzen können, sowie ein oder zwei Nachteile, die mit Symbolfronten verbunden sind:
Verwenden von Font Awesome
Mit normalem Bootstrap-CSS:
Font Awesome kann mit dem standardmäßigen Bootstrap-CSS verwendet werden, indem Sie das Awesome-Schriftverzeichnis in Ihr Projekt kopieren und dann font-awesome.min.css in das Projekt kopieren. Sie müssen dann font-awesome.min.css öffnen und die Schriftpfade bearbeiten, um sicherzustellen, dass sie auf den Awesome-Speicherort verweisen.
Im Head-Abschnitt Ihres HTML-Codes sollte der Speicherort der font-awesome.min.css wie folgt angegeben werden:
Der Schriftartenpfad ist relativ zu Ihrem CSS-Verzeichnis.
Mit Bootstrap weniger:
Wenn Sie Twitter Bootstrap mit LESS CSS verwenden, kopieren Sie zuerst das Font Awesome-Verzeichnis in Ihr Projekt und font-awesome-less in Ihr Bootstrap Less-Verzeichnis. Dann:
- a) Öffne bootstrap.less und ersetze @import „sprites.less“; mit @import „font-awesome.less“;
- b) Öffnen Sie font-awesome.less Ihres Projekts und bearbeiten Sie die Variable @FontAwesomePath, um auf Ihr Schriftartenverzeichnis zu verweisen.
@FontAwesomePath: "../font";
Der Schriftartpfad ist relativ zu Ihrem kompilierten CSS-Verzeichnis.
Dann sind Sie fertig – wenn Sie jedoch einen statischen Compiler verwenden, sollten Sie LESS neu kompilieren.
Bootstrap nicht verwenden:
Wenn Sie Bootstrap nicht verwenden, können Sie nach dem Kopieren der Schriftartendatei in Ihr Projektverzeichnis eine der beiden Schriftartendateien in Ihr Projekt kopieren, sie öffnen und dann den Speicherort der Schriftart bearbeiten, um auf das Schriftartenverzeichnis zu verweisen.
Wenn Sie Internet Explorer 7 verwenden, verwenden Sie font-awesome-ie7.min.css
So verwenden Sie Font Awesome in WordPress
Es gibt zwei einfache Möglichkeiten, Icon-Fonts in WordPress zu verwenden. Sie haben das Plugin hochgeladen*. Sie können sie mit HTML einbetten oder Shortcode verwenden. Hier sind jeweils Beispiele:
HTML verwenden: Wo die Schriftart erscheinen soll, fügen Sie einfach den Namen des Elements zum Klassennamen hinzu: [html] [/html]
fügt einen schwarzen Kreis hinzu.
Sie können die Größe des Kreises so ändern:
Sie werden es wahrscheinlich einfacher finden, die Schriftgröße zu Ihrem CSS-Stylesheet hinzuzufügen, wenn Sie beabsichtigen, häufig dieselbe Symbolgröße und das obige Format für Ausnahmen zu verwenden.
Shortcode verwenden: Shortcode ist einfacher, funktioniert aber im Allgemeinen nur für Post- und Seiteninhalte im Post-Editor-Bildschirm. Das Format ist [icon name=icon-circle] wo Sie den Kreis haben möchten.
Der Nachteil von Icon-Schriften
Icon-Fonts scheinen großartig zu sein, wenn Sie Ihrem Blog oder Ihrer Website ein bestimmtes Symbol hinzufügen müssen, und sie können verknüpft werden, um bestimmte Funktionen auszuführen. Allerdings ist nicht alles perfekt und Icon-Fonts haben auch Nachteile. Dies sind die häufigen Probleme, die von Benutzern von Symbolschriftarten gemeldet werden, die nicht auf Font Awesome zutreffen – deshalb ist es so 'Super!'
- Eines ist das potenzielle Problem mit Bildschirmleseprogrammen, die das Symbol möglicherweise als alphabetischen Buchstaben vorlesen. Dies ist bei Font Awesome aufgrund der Art und Weise, wie die Schriftzeichen abgerufen werden, kein Problem.
- Sie können nur in einer einzigen Farbe dargestellt werden – oder in einem Farbverlauf mit CSS3-Verläufen. Ist das ein echtes Problem mit Symbolschriftarten?
- Es kann einige Zeit dauern, eine benutzerdefinierte Schriftart zu erstellen, die Ihren Anforderungen entspricht. Allerdings bietet Font Awesome bereits eine große Auswahl an großartigen Schriftarten und die Liste wird ständig erweitert. Obwohl es sich um eine kostenlose Closed-Source-Schriftart handelt, werden von Benutzern erstellte genehmigte Schriftarten regelmäßig hinzugefügt.
Zusammenfassung des Font Awesome Generators
Der Font Awesome Generator ist einer der besten kostenlosen Icon-Fonts, die derzeit erhältlich sind. Obwohl es für die Verwendung mit Twitter Bootstrap entwickelt wurde, kann es für die Verwendung auf normalen Websites angepasst werden und es gibt auch ein WordPress-Plugin, das das Beste dieser Symbolschrift bietet. Wenn Sie Icon-Fonts verwenden, probieren Sie Font Awesome aus, denn Sie werden angenehm überrascht sein, wenn Sie es beherrschen.
* Das WordPress-Plugin Font Awesome Icons ist verfügbar unter https://github.com/rachelbaker/
Vivek Nath.R
In meinem Blog verwende ich das Wp Exclusive Icon Fonts Plugin http://wordpress.org/extend/plugins/wp-elusive-iconfont/
Der Vorteil ist, dass es mehr Anpassungsoptionen wie das Ändern von Farbe, Größe, Ausrichtung usw. bietet und auch viele andere Symbole. Überprüfen Sie es.
Rajesh Namase
Danke Vivek, dass du dieses WordPress-Plugin mit unseren Lesern geteilt hast.
James Dreesen
Hey Vivek, danke für das Teilen des Plugins, ich habe nach so etwas gesucht. Ich würde auch Font Awesome Icons ausprobieren, um zu sehen, welches das Richtige für mich ist. Schöner Artikel Rajesh, bitte weiter so! Alles Gute für dich.
Rajesh Namase
Versuchen Sie auch, das Font Awesome WordPress-Plugin zu verwenden :)
Andy
Hallo, ich habe gerade nach so etwas gesucht, da ich zu faul bin, all diese Klassen zu erstellen und die Stile und Bilder in das Thema einzufügen. Dankeschön!!
Vipin
Vielen Dank an Vivek und Rajesh, beide haben die Informationen bereitgestellt, nach denen ich gesucht habe.
Rohit Chougale
hallo rajesh
'Erzählen Sie mir, ob wir Videos in PHP online abspielen können, wenn ja, dann sagen Sie mir, wie..
Rajesh Namase
Sie können versuchen, HTML 5-Video-Tags zu verwenden :) Und es ist einfach, HTML 5 mit PHP zu verwenden :)
vaibhav
Ich füge dieses Plugin verteidigt meinem WordPress-Konto hinzu..
danke admin..!
Anand Hittinali
Nun, ich bin kein Mann vieler Worte, daher ist dieses Plugin wirklich hilfreich für mich. danke für das Teilen dieses Plugins.
Lilie
Gibt es dafür ein Plugin? Wow toll, dass ich es das erste Mal gehört habe. Vielen Dank, dass Sie dies teilen.
Mohsin Ali
Sehr interessantes Plugin Rajesh, woher hast du diese einzigartigen Ideen.
David Kroft
Hallo,
danke für diesen schönen Blog, denn dieses Thema „Icon Fonts“ ist sehr neu für mich, sodass ich viele neue Dinge und neue Wörter in deinem Blog kennenlernen kann.
Der Font-Generator ist wirklich die beste kostenlose Icon-Fonts, die derzeit verfügbar ist. es ist also sehr nützlich.
David Johnson
Zu Ihrer Information, Sie haben den Begriff „Font Awesome Generator“ verwendet, aber Ihr Artikel behandelt Font Awesome selbst, keinen Generator. Das Wort „Generator“ hat im Zusammenhang mit Icon-Fonts eine besondere Bedeutung. Beispiele für Symbolschriftgeneratoren, die Font Awesome unterstützen, sind icnfnt und Fontello.
Rajesh Namase
Okay, wir haben den Artikeltitel aktualisiert, danke.
Carlton
Sie haben einen wesentlichen Nachteil von Symbolschriftarten ausgelassen: Sie werden nicht anmutig verschlechtert. Alle Benutzer, die das Herunterladen von Schriftarten deaktiviert haben (weil sie entweder sicherheitsbewusst sind, früher sicherheitsbewusst waren und es vergessen haben oder von einer anderen Person konfiguriert wurden, die sicherheitsbewusst war und sich nicht bewusst war), sehen nur hässliche leere Glyphensymbole. Um ein verantwortungsbewusster Icon-Font-Benutzer zu sein, müssen Sie akzeptieren, diese Benutzer unter einen Bus zu werfen.
Ayush Agrawal
Dieser Artikel scheint etwas alt zu sein, aber ich möchte sagen, dass eine gute Möglichkeit, Font Awesome zu verwenden, die Verwendung seines cdn ist: //netdna.bootstrapcdn.com/font-awesome/3.2.0/css/font-awesome.min.css .
Hilft Bloggern, die Ladezeiten zu verkürzen.
Vikas
Schöner Beitrag, Font Awesome ist eine der besten Entwicklungen in der Designwelt.
Mark Fox
Danke für das Teilen. Ich bin jetzt eher geneigt, es zu verwenden.
Gaurav Dutt
Mann! 2013, wie konnte ich das noch nicht gesehen haben, aber bei mir funktionierte es immer noch einwandfrei. Danke dafür.