TechBlogSD - Alles für WordPress und WEB-Entwicklung
WEB- und WordPress-Anleitungen, Neuigkeiten, Rezensionen zu Themes und Plugins

Wie behebt man Font Awesome Icons, die als Box angezeigt werden?

7

In der Webentwicklung ist es üblich, Schriftartsymbole im SVG-Format zu verwenden, anstatt Symbole mithilfe von Escape-Entitäten einzugeben. Font Awesome-Symbole sind beispielsweise aufgrund der Skalierbarkeit der Symbole ohne Qualitätsverlust am beliebtesten. Wenn Sie die Schriftart jedoch nicht richtig implementieren, werden fantastische Symbole als Kästchen angezeigt. Wenn Sie Probleme mit Schriftartsymbolen haben, sehen Sie sich an, wie Sie diese beheben können.

Verwenden von Font Awesome Icons in der Website

Es gibt zwei Möglichkeiten, Schriftsymbole auf Ihrer Website zu verwenden. Eine ist die Verwendung in HTML-Tags und die andere ist die Verwendung von CSS-Pseudoklassen. Bei beiden Methoden sollten Sie die Quellschrift mit fantastischem CSS verknüpfen und die Schriftartdateien auf Ihrem Server hosten, damit die richtigen Stile auf die Symbole angewendet werden können. Unten ist ein Beispiel für die Verwendung von Font Awesome in HTML:

Wie behebt man Font Awesome Icons, die als Box angezeigt werden?

Verwenden von Font Awesome

In diesem Artikel von der offiziellen Website erfahren Sie, wie Sie Schriftsymbole auf Ihrer Website verwenden. Wenn beim Laden etwas fehlt, sehen Sie anstelle des Symbols die untenstehende Box.

Wie behebt man Font Awesome Icons, die als Box angezeigt werden?

Schriftart Icon Sau Box

Warum werden Font Awesome Icons als Box angezeigt?

Um ein Schriftsymbol auf Ihrer Website einzufügen, müssen Sie Folgendes haben:

  • Hosten Sie Schriftarten auf Ihrem Server
  • Linke korrekte Schriftart tolle CSS-Version
  • Kein Konflikt mit alten und neuen Versionen auf derselben Site
  • Überprüfen Sie die richtige Schriftfamilie
  • Verwenden Sie die richtige CSS-Klasse
  • Schriftstärke prüfen
  • CSS-Inhaltscode prüfen

Lassen Sie uns den Leichtigkeitspunkt im Detail überprüfen.

1 Hosten Sie Schriftarten auf Ihrem Server

Um Font Awesome auf Ihrer Website zu verwenden, ist es notwendig, die Font-Dateien auch im selben Verzeichnis zu hosten. Alle Webfont-Schriften sollten im Ordner „/webfonts” verfügbar sein und im CSS im Ordner „/css” referenziert sein.

In den meisten Fällen installiert das von Ihnen verwendete Theme oder Plugin alle erforderlichen CSS- und Font-Dateien auf Ihrem Server. Dies ist insbesondere dann der Fall, wenn Sie WordPress für Ihre Website verwenden.

2 Link-Korrekte CSS-Version

Font Awesome war bis Version 4.70 kostenlos verfügbar. Ab Version 5.0 sind jedoch sowohl kostenlose als auch Pro-Versionen verfügbar. Obwohl die Version 4.70 veraltet war, verwenden die meisten kostenlosen Plugins und Themes aufgrund der einheitlichen CSS-Klasse und der Benutzerfreundlichkeit immer noch 4.70. Version 5.0 hat jedoch Marken und solide Stile für kostenlose Benutzer und Sie können all.css verwenden, um beide Stile einzuschließen.

Sie können sich entweder bei der Font Awesome Site registrieren, um ein CDN-Kit zu erhalten, oder die bei Cloudflare verfügbaren CDN-Dateien verwenden.

Wie behebt man Font Awesome Icons, die als Box angezeigt werden?

Holen Sie sich das Font Awesome CDN-Kit

3 widersprüchliche CSS-Versionen

Eines der Probleme, mit denen wir bei einer WordPress- Site konfrontiert waren, war, dass ein Plugin Version 4.70 verwendet und das Theme 5.0 verwendet. Dies verursachte den Konflikt aufgrund inkompatibler CSS-Klassen- und Inhaltscodes. Stellen Sie daher sicher, dass Sie die neueste Version 5.0 mit der richtigen CSS-Quelldatei auf Ihrer Site verwenden.

Wie behebt man Font Awesome Icons, die als Box angezeigt werden?

Schriftsymbole werden als Kästchen angezeigt

4 Verwenden Sie die richtige Schriftfamilie

Um Font Awesome mit CSS zu verwenden, sollten Sie die richtige Schriftfamilie verwenden. Unten ist die Art des CSS-Codes, der in Version 4.70 verwendet wird.

.li:before {
content:"00A3″; Schriftfamilie: „FontAwesome”; Schriftstärke: normal; }

Bei Version 5.0 wird jedoch ein Kästchen anstelle eines Symbols angezeigt. Sie sollten das folgende CSS mit der kostenlosen Version 5.0 verwenden.

.li:before {
content:”00A3″; Schriftfamilie: " Font Awesome 5 Free "; Schriftstärke: 900 ; }

Stellen Sie daher sicher, dass Sie im CSS die richtige Schriftfamilie „Font Awesome 5 Free” verwenden. Wenn Sie soziale Symbole verwenden, sollte die Schriftfamilie „Font Awesome 5 Brands” sein. Dies sind die beiden Schriftfamilien, die für kostenlose Benutzer verfügbar sind.

5 Verwenden Sie das richtige CSS-Stilpräfix

Eine weitere Verwirrung ist, dass Version 5.0 andere CSS-Klassen hat als die vorherigen Versionen. In Version 4.7 können Sie das fa-Stilpräfix wie folgt verwenden:

<i class=”fa fa-camera”>

Dies funktioniert jedoch nicht ab Version 5.0. Das fa-Stilpräfix wurde eingestellt und Sie sollten fas für solide Symbole und fab für Social-Branding-Symbole wie Facebook verwenden.

6 Schriftstärke prüfen

Font Awesome Version 5.0 unterstützt keine allgemeine „font-weight:normal”-Deklaration in CSS. Sie sollten eine bestimmte Schriftstärke angeben, damit das Symbol angezeigt wird.

7 CSS-Inhaltscode prüfen

Der letzte Punkt besteht darin, sicherzustellen, dass der in CSS verwendete Inhaltscode korrekt ist. Sie müssen einen der verfügbaren Codes von der Font Awesome-Site im CSS-Pseudoelement verwenden. Stellen Sie außerdem sicher, dass Sie den Code im Format „f00d” verwenden; um das Symbol richtig anzuzeigen.

Zusammenfassung

Nachfolgend finden Sie eine Zusammenfassung der Schriftfamilie, der Schriftstärke, des Stilpräfixes und der Stile, die für kostenlose und professionelle Benutzer verfügbar sind. Sie müssen sicherstellen, dass alle diese Angaben korrekt sind, damit das Symbol anstelle eines Kästchens angezeigt wird.

Stil Verfügbarkeit Font Gewicht Stilpräfix Schriftfamilie
Fest Kostenlos 900 Sie machen Font Awesome 5 Free oder Font Awesome 5 Pro
Regulär Profi 400 weit Font Awesome 5 Pro
Hell Profi 300 fal Font Awesome 5 Pro
Duoton Profi 900 Mode Schriftart Awesome 5 Duotone
Marken Kostenlos 400 fabelhaft Font Awesome 5 Marken

Aufnahmequelle: www.webnots.com
Hinterlasse eine Antwort

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen