So verwenden Sie Font Awesome-Symbole in WordPress

Wenn Sie Font Awesome-Symbole auf Ihrer WordPress-Seite verwenden möchten, müssen Sie zunächst das Font Awesome Icons-Plugin installieren und aktivieren. Weitere Informationen finden Sie in unserem Artikel zur Installation eines WordPress-Plugins. Sobald das Plugin aktiviert ist, müssen Sie Ihr WordPress-Theme bearbeiten, um die Font Awesome CSS-Datei einzubinden. Am einfachsten geht das, indem Sie der Datei functions.php Ihres Themes den folgenden Code hinzufügen: add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' ); function enqueue_font_awesome() { wp_enqueue_style( 'font-awesome', '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css', array(), '4.0.3' ); } Dieser Code lädt die Font Awesome CSS-Datei aus dem Bootstrap CDN. Wenn Sie möchten, können Sie die Font Awesome CSS-Datei herunterladen und auf Ihrem eigenen Server hosten. Sobald die Font Awesome CSS-Datei geladen ist, können Sie die Symbole auf Ihrer WordPress-Site verwenden. Sie können Ihrem Menü beispielsweise ein Symbol wie dieses hinzufügen: Startseite Kontakt Sie können auch Font Awesome-Symbole in Ihren Inhalten verwenden. Sie können beispielsweise ein Symbol zu einer Liste wie dem folgenden hinzufügen: Dies ist Element eins. Dies ist Element zwei. Dies ist Element drei. Und Sie können einem Link wie diesem ein Symbol hinzufügen: Folgen Sie mir auf Twitter. Die Möglichkeiten sind endlos! Weitere Informationen finden Sie auf der Font Awesome-Website.

Daher ist die Verwendung der Font Awesome-Bibliothek auf Ihrer WordPress-Seite relativ einfach. Sie können die Ladezeit der Seite verkürzen, nachdem Sie diese einfachen Schritte befolgt haben. Es ist nicht erforderlich, die Symbole als Schriftarten für Ihre Website zu verwenden. Sie können auf jede Weise bearbeitet werden, die Sie normalerweise in eine Schriftart aufnehmen könnten. Das Font Awesome WordPress-Plug-in eignet sich für Personen, denen es unangenehm ist, in ihr Design oder ihre Dateien zu gehen, um den erforderlichen Code einzufügen. Der Pro-Plan enthält 1.500 kostenlose Symbole sowie über 5.000 Variationen. Sie können jedes gewünschte Symbol hinzufügen, indem Sie class=fab fa-wordpress in einer beliebigen Sprache eingeben und/oder bearbeiten.

Klicken Sie in Ihrem WP-Dashboard auf Aussehen – Editor und dann auf die Datei header.php. Überprüfen Sie die Position der Zeile, die den Code enthält, bevor Sie darauf klicken, und fügen Sie dann denselben Code aus Font Awesome ein. Dazu müssen Sie sich in die Core-Dateien Ihres Designs einarbeiten, aber es ist ein einfacher und schneller Prozess. Nachdem Sie Font Awesome installiert haben, müssen Sie sicherstellen, dass die Symbole richtig positioniert sind. Es ist möglich, das Styling in Ihre Stylesheets aufzunehmen oder es inline zu machen. Farbe und Größe sind zwei der am häufigsten verwendeten Stile. Sie können das Symbol in seinem eigenen <div> ändern, damit es in Ihren Einschränkungen funktioniert, wenn Sie es relativ zu einer bestimmten Größe benötigen, die absoluten Werte jedoch nicht.

Die Menüoption Font Awesome Icon findest du in der erweiterten Formatleiste, wenn du dich in einem Gutenberg-Textblock befindest (oder über der Formatleiste im WordPress Classic-Editor). Mit der Symbolauswahl können Sie anhand des Symbolnamens, der Kategorie oder des Schlüsselworts nach Font Awesome-Symbolen suchen.

Wie verwende ich Font Awesome im WordPress-Theme?

Wenn Sie Font Awesome in Ihrem WordPress-Theme verwenden möchten, gibt es einige Möglichkeiten, wie Sie dies tun können. Eine Möglichkeit ist die Verwendung eines Plugins wie Better Font Awesome , das Ihnen eine Einstellungsseite bietet, auf der Sie Font Awesome-Symbole auf Ihrer Website einfach aktivieren oder deaktivieren können. Eine andere Möglichkeit besteht darin, den Font Awesome-Code manuell zu Ihrem Design hinzuzufügen. Den Code für jedes Symbol finden Sie auf der Website von Font Awesome. Sobald Sie den Code haben, können Sie ihn der CSS-Datei Ihres Designs hinzufügen oder wo immer Sie ihn einfügen möchten.

Das Team von Font Awesome hat ein neues Tutorial zur Verwendung des Pseudo-Elements ::before zum Hinzufügen von Symbolen zu Ihren Seiten mit CSS in Version 4.7 ihrer App erstellt. Wenn Sie dieses Tutorial verwenden, müssen Sie keine Bilder verwenden oder Code kopieren und einfügen, um Ihren Seiten Symbole hinzuzufügen.
Wenn Sie die kostenlose Version von Font Awesome installiert haben, verpassen Sie möglicherweise einige der Symbole in der Pro-Version. Wenn dies keine Option ist, können Sie entweder die alternativen kostenlosen Symbole erhalten oder auf ein Pro-Abonnement upgraden.
Wenn Sie Ihren Seiten Symbole hinzufügen möchten, ohne Bilder oder Code verwenden zu müssen, ist die ::before-Pseudoelement-Methode eine großartige Option. Die Verwendung dieses Pseudo-Elements ist einfach, wenn Sie dem von Font Awesome bereitgestellten Tutorial folgen, und Sie können Ihren Seiten auch Symbole hinzufügen.

Kann ich Font Awesome kommerziell nutzen?

Font Awesome ist vollständig Open Source und wird mit einer GPL-Lizenz geliefert. Das Programm kann für jedes Projekt verwendet werden, von kommerziell über Open Source bis hin zu rein persönlichen.

Wie füge ich Font Awesome ohne Plugins zu WordPress hinzu?

So fügen Sie Font Awesome ohne Plugin zu Ihrem WordPress hinzu Sie können Symbole manuell hinzufügen, indem Sie zur Font Awesome-Symbolbibliothek gehen und aus einer Auswahl verfügbarer Schriftarten auswählen. Sie können den Einbettungscode erhalten, indem Sie den Link zu Ihrem Design per E-Mail senden.

Symbole können ohne Programmier- oder Designkenntnisse zu WordPress hinzugefügt werden. Das Schriftsymbol ist vollständig anpassbar und reaktionsschnell, und einige von ihnen haben herkömmliche Bilder oder Sprite-Blätter ersetzt. Es ist derzeit auf über 80.000 Computern installiert und mit der neuesten WordPress-Version kompatibel. Symbole können genauso häufig geändert werden wie normale Schriftarten für den Alltag. Mit diesen Optionen können Sie Farben, Ausrichtung, Höhe, Stil usw. ändern. Fast jeder Browser unterstützt Schriftsymbole. Da so viele Schriftartsymbole verfügbar sind, ist die Verwendung von Bildern auf unseren Websites eingeschränkt.

Die Mehrheit der Designer hat aufgehört, traditionelle Bilder zu verwenden, und sie durch Font Awesome-Symbole ersetzt. Symbole sind ein fantastisches Werkzeug, das auf vielfältige Weise modifiziert werden kann. Wenn Sie die Symbolgröße ändern, es drehen, seine Farbe ändern oder andere Aktionen ausführen, können Sie es auch flexibler gestalten. Der folgende Code muss kopiert und in Ihren WordPress-Editor eingefügt werden. Wie funktioniert Font Awesome in Elementor? Es ist nicht erforderlich, die Kerndateien zu ändern oder Plugins für Ihr Design zu installieren. Icons für Font Awesome sind bereits in der Premium-Version von Elementor vorhanden. Mit Better Font Awesome können Sie Shortcodes verwenden, die mit dem Plug-in Font Awesome Icons und Font Awesome Shortcodes erstellt wurden .

Das Ändern der CDN-Einstellungen im Font Awesome-Plug-in ist alles, was erforderlich ist, um benutzerdefinierte Symbole bereitzustellen. Sie können auch Ihre eigene CDN-Konfiguration verwenden, anstatt das standardmäßige Font Awesome CDN zu verwenden. Wenn Sie nur die grundlegenden kostenlosen Symbole verwenden möchten, müssen Sie wahrscheinlich keine Änderungen an der Standardkonfiguration vornehmen. Nachdem Sie eine kostenlose ZIP-Datei von der offiziellen Website von Font Awesome heruntergeladen haben, extrahieren Sie sie und verlinken Sie sie mit Ihrer Seite. In der Plugin-Dokumentation gibt es viele Informationen darüber, wie Sie Ihr eigenes CDN einrichten.

Font Awesome: Ein unverzichtbares WordPress-Plugin für Ihre Website

Mit dem WordPress-Plugin Font Awesome können Sie eine Bibliothek mit Symbolen auf Ihrer Website verwenden. Wenn Sie damit nicht vertraut sind, können Sie die Einstellungen anpassen, indem Sie zur Seite mit den Plugin-Einstellungen gehen. Zunächst müssen Sie das Font Awesome-Plug-in auf Ihrer WordPress-Site installieren. Wählen Sie dann in den Plugin-Einstellungen Use a Kit. Auf diese Weise können Sie die Symbole der Plugins mit einem bestimmten CDN verwenden. Es sind keine Änderungen erforderlich, wenn Sie nur die grundlegenden Symbole benötigen.

Fügen Sie Font Awesome zu WordPress ohne Plugin hinzu

Das Hinzufügen von Font Awesome zu WordPress ohne ein Plugin ist ein ziemlich einfacher Vorgang. Zuerst müssen Sie die Font Awesome-Website besuchen und die neueste Version der Font Awesome-Bibliothek herunterladen. Als Nächstes müssen Sie die Font Awesome-Bibliothek auf Ihre WordPress-Site hochladen. Der einfachste Weg, dies zu tun, ist die Verwendung eines FTP-Clients. Sobald die Font Awesome-Bibliothek auf Ihre WordPress-Site hochgeladen wurde, müssen Sie der Datei functions.php Ihres WordPress-Themes einige Codezeilen hinzufügen. Der Code, den Sie hinzufügen müssen, lautet:
add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' );
Funktion enqueue_font_awesome() {
wp_enqueue_style( 'font-awesome', '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css', array(), '4.0.3' );
}
Das Hinzufügen von Font Awesome zu WordPress ohne ein Plugin ist ein ziemlich einfacher Vorgang. Der Code, den Sie hinzufügen müssen, lautet:
add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' );
Funktion enqueue_font_awesome() {
wp_enqueue_style( 'font-awesome', '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css', array(), '4.0.3' );
}

Mit den folgenden Schritten können Sie Font Awesome zu Ihrer WordPress-Site hinzufügen. Die gängigsten Methoden dafür sind interne oder externe. Das Wichtigste ist, sicherzustellen, dass die Schriftart korrekt geladen wird. Wenn die Schriftart und der Link nicht richtig konfiguriert sind oder das Symbol überhaupt nicht angezeigt wird. Die Verwendung von Font Awesome ist einfach, da zum Kopieren und Einfügen nur wenige Zeilen erforderlich sind. Wenn Sie Sass oder Less verwenden, müssen Sie den Ordner „font-awesome“ herunterladen und im Projektstammverzeichnis ablegen. Einige Plugins sind verfügbar, um Sie bei der Installation zu unterstützen. Vielleicht möchten Sie Ihre eigenen Plugins erstellen, die für mehrere Projekte und Themen verwendet werden können.

So verwenden Sie Font Awesome-Symbole in WordPress

Wählen Sie einfach die Font Awesome-Symbole aus dem WordPress-Menü aus. Es ist einfach, jeder Seite ein Symbol hinzuzufügen, indem Sie *i class=fab fa-wordpress*/i hinzufügen. Sehen Sie in der Symbolbibliothek nach Vorschlägen, was enthalten sein sollte. Es ist wichtig zu beachten, dass die Shortcodes im Plugin nicht immer funktionieren.

So verwenden Sie Font Awesome Icons auf Ihrer WordPress-Site in (2121). Es ist eine der beliebtesten Symbolbibliotheken im Web. Wie können Sie Font Awesome auf WordPress auf vielfältige Weise konfigurieren? In diesem Artikel erfahren Sie, wie Sie Font Awesome nahtlos in WordPress integrieren. Wenn Sie nicht wissen, wie Sie Font Awesome-Symbole auf Ihrer Website verwenden sollen, ist das Hosten auf Ihrem Server die beste Option. Die einzigen Dateien, die hinzugefügt werden können, sind diejenigen, die Sie auf Ihrer WordPress-Site verwenden, wenn Sie die Symbole selbst hosten. Was Font Awesome als Symbolpaket auszeichnet, ist seine Fähigkeit, das Erscheinungsbild von Symbolen anzupassen und zu ändern.

WordPress-Benutzer können mit den folgenden Methoden auf Font Awesome zugreifen. Wenn Sie keine Programmiererfahrung haben, ist das Anpassen der Symbole noch schwieriger. Das Block-Plugin Gutenberg Stackable, das als kostenloser Download installiert wird, kann mit Font Awesome verwendet werden, um die Verwendung zu vereinfachen. Mit der Stapelfunktion können Sie vorgefertigte Premium-Designs auswählen, die der Qualität der Font Awesome-Symbole entsprechen. Sie können auf die Symbole jedes Font Awesome Pro -Kontos zugreifen, indem Sie zum Symbolblock gehen. Stackable übernimmt den Registrierungsprozess für Sie, sodass Sie sich nicht für ein Konto anmelden oder einen Kit-Code erstellen müssen. Es sind keine Programmierkenntnisse erforderlich, um das Erscheinungsbild der Symbole zu ändern. Dies ist nur für diejenigen verfügbar, die die Free- und Pro-Pläne kaufen.

Wenn Sie Font Awesome Pro nicht verwenden, sollten Sie in der Liste der Font Awesome Standard-Symbole nach den kostenlosen Symbolen suchen. Wenn Sie Font Awesome Pro verwenden, müssen Sie das richtige Stilpräfix sowie die unterstützenden Dateien referenzieren. Wenn Sie den Styleguide verwenden, können Sie sich ein Gefühl für die Verwendung von Font verschaffen. Hier sind einige großartige Pro-Symbole. Wenn Sie ein Font Awesome Standard-Abonnement oder höher haben, müssen Sie auch Pro-Symbole verwenden.