Font Awesome kann nicht geladen werden

Lesezeit: 6 Minuten

Ich war nicht in der Lage, eine Webschriftart auf meinem Website-Server selbst zu bedienen und zu laden, und andere Stack Overflow-Artikel zu diesem Thema haben mir nicht geholfen, den Fehler hier zu lokalisieren.

Ich erhalte eine Leerstelle, wo die Schriftarten erscheinen sollen.

Hier sind die Details:

  • https://www.foo.com/public_html/wp-content/themes/independent-publisher/fonts/fontawesome-free-5-0-6/web-fonts-with-css/

    ist der Speicherort der CSS-Datei meiner Schriftart, fontawesome-all.css

Screenshot des CSS-Dateipfads in einem FTP-Browser

  • https://www.foo.com/public_html/wp-content/themes/independent-publisher/fonts/fontawesome-free-5-0-6/web-fonts-with-css/webfonts

    ist der Speicherort meiner Schriftart

Screenshot des Speicherorts der Schriftart in einem FTP-Browser

zuerstvergewissern Sie sich, dass ich keine pfadbezogenen Fehler in meinem Stylesheet-Link in meiner Kopfzeile begangen habe.

Ich habe versucht, auf das CSS-Stylesheet der Schriftart in meinen HTML-Headern auf verschiedene Weise zu verweisen:

Als relativer Link:

<link href="https://stackoverflow.com/questions/48885345/./fonts/fontawesome-free-5-0-6/web-fonts-with-css/fontawesome-all.css" rel="stylesheet">

Als absoluter Link:

<link href="https://www.foo.com/public_html/wp-content/themes/independent-publisher/fonts/fontawesome-free-5-0-6/web-fonts-with-css/fontawesome-all.css" rel="stylesheet">

Zweitens, vergewissern Sie sich, dass meine @font-face-Implementierung und die angegebenen Pfade korrekt sind. Innerhalb des Stylesheets der Schriftart fontawesome-all.css ist ein @font-face Aufruf der Schriftart:

@font-face {
  font-family: 'Font Awesome 5 Brands';
  font-style: normal;
  font-weight: normal;
  src: url("../webfonts/fa-brands-400.eot");
  src: url("../webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.woff") format("woff"), url("../webfonts/fa-brands-400.ttf") format("truetype"), url("../webfonts/fa-brands-400.svg#fontawesome") format("svg"); }

.fab {
  font-family: 'Font Awesome 5 Brands'; }
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 400;
  src: url("../webfonts/fa-regular-400.eot");
  src: url("../webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.woff") format("woff"), url("../webfonts/fa-regular-400.ttf") format("truetype"), url("../webfonts/fa-regular-400.svg#fontawesome") format("svg"); }

.far {
  font-family: 'Font Awesome 5 Free';
  font-weight: 400; }
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  src: url("../webfonts/fa-solid-900.eot");
  src: url("../webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.woff") format("woff"), url("../webfonts/fa-solid-900.ttf") format("truetype"), url("../webfonts/fa-solid-900.svg#fontawesome") format("svg"); }

.fa,
.fas {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900; }

Bearbeiten: das HTML, das ich für die Schriftarten (Symbole) verwende, die auf der Seite erscheinen sollen, ist Standard: zum Beispiel <i class="fas fa-external-link-alt"></i> und auch die Pseudo-Element-Instanz:

.rss-subscribe:before{
font-family: 'Font Awesome 5 Free';
font-size: 20pt;
content: "\f09e";
margin-right: 10px;
float: left;
width: 32px;
}

Bearbeiten 2: Verwendung einer offiziellen externen Quelle für die CSS-Datei der Schriftart, <link href="https://www.ashenglowgaming.com/public_html/wp-content/themes/independent-publisher/fonts/fontawesome-free-5-0-6/web-fonts-with-css/fontawesome-all.css" rel="stylesheet"> in der Kopfzeile funktioniert für Inline-Instanzen der Schriftart, wie in dem Beispiel, das ich oben gegeben habe <i class="fas fa-external-link-alt"></i>aber nicht für die Pseudoelementinstanz

.rss-subscribe:before{
font-family: 'Font Awesome 5 Free';
font-size: 20pt;
content: "\f09e";
margin-right: 10px;
float: left;
width: 32px;
}

Auf jeden Fall möchte ich die Datei auf meinem eigenen Server ausliefern, daher reicht mir die Verlinkung extern nicht aus.

Abschließend zu Ihrer Information: Sehen Sie sich die an offizielle Font Awesome Installationsanleitung hier

  • Welchen HTML-Code verwenden Sie, damit die Symbole auf der Seite erscheinen?

    – Arti

    20. Februar 2018 um 12:35 Uhr

  • Siehe die Bearbeitung meines ursprünglichen Beitrags. Vielen Dank.

    – Benutzer9353046

    20. Februar 2018 um 12:39 Uhr

  • Wenn Sie den Link im Kopf Ihrer Website überprüfen, können Sie den Link zum Stylesheet öffnen? oder lädt es überhaupt nicht in die Website?

    – Arti

    20. Februar 2018 um 12:57 Uhr

  • Nein das ist Teil des Problems – siehe die Lösung von Cabrerahector unten. Der ursprüngliche Pfad für die CSS-Datei war falsch. public_html muss aus dem Pfad entfernt werden, dann kann der Link korrekt geöffnet werden. Beachten Sie auch, dass ich offensichtlich ersetzt habe www.foo.com für meine aktuelle Webdomain, sodass Sie nicht darauf zugreifen können, es sei denn, Sie kennen meine aktuelle Domain, die ich Ihnen bei Bedarf per PN mitteilen kann.

    – Benutzer9353046

    20. Februar 2018 um 13:44 Uhr

Benutzer-Avatar
cabrerahektor

Ich denke, das könnte das Problem sein:

url("../webfonts/font-here.ext");

In deiner fontawesome-all.css stylesheet, bitten Sie den Browser, ein Verzeichnis über dem aktuellen nach den Schriftartdateien zu suchen, was nicht korrekt ist, da die Schriftartdateien in einem Ordner im selben Verzeichnis wie das Stylesheet zu liegen scheinen.

Das sollte funktionieren:

@font-face {
  font-family: 'Font Awesome 5 Brands';
  font-style: normal;
  font-weight: normal;
  src: url("webfonts/fa-brands-400.eot");
  src: url("webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("webfonts/fa-brands-400.woff2") format("woff2"), url("webfonts/fa-brands-400.woff") format("woff"), url("webfonts/fa-brands-400.ttf") format("truetype"), url("webfonts/fa-brands-400.svg#fontawesome") format("svg"); }

.fab {
  font-family: 'Font Awesome 5 Brands'; }
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 400;
  src: url("webfonts/fa-regular-400.eot");
  src: url("webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("webfonts/fa-regular-400.woff2") format("woff2"), url("webfonts/fa-regular-400.woff") format("woff"), url("webfonts/fa-regular-400.ttf") format("truetype"), url("webfonts/fa-regular-400.svg#fontawesome") format("svg"); }

.far {
  font-family: 'Font Awesome 5 Free';
  font-weight: 400; }
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  src: url("webfonts/fa-solid-900.eot");
  src: url("webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("webfonts/fa-solid-900.woff2") format("woff2"), url("webfonts/fa-solid-900.woff") format("woff"), url("webfonts/fa-solid-900.ttf") format("truetype"), url("webfonts/fa-solid-900.svg#fontawesome") format("svg"); }

.fa,
.fas {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900; }

Aktualisieren

Das ist das Problem:

<link href="https://www.foo.com/public_html/wp-content/themes/independent-publisher/fonts/fontawesome-free-5-0-6/web-fonts-with-css/fontawesome-all.css" rel="stylesheet">

Sollte sein:

<link href="https://www.foo.com/wp-content/themes/independent-publisher/fonts/fontawesome-free-5-0-6/web-fonts-with-css/fontawesome-all.css" rel="stylesheet">

Es scheint also, dass Sie tatsächlich zwei Probleme hatten: falscher Pfad zu Schriftartdateien und falscher Pfad zum Stylesheet.

Übrigens empfehle ich die Verwendung wp_enqueue_style und wp_enqueue_script So hängen Sie Stylesheets und JS-Dateien an den Kopfbereich Ihres Designs an:

/**
 * Proper way to enqueue scripts and styles
 */
function wpdocs_theme_name_scripts() {
    wp_enqueue_style( 'font-awesome', get_template_directory_uri() . '/fonts/fontawesome-free-5-0-6/web-fonts-with-css/fontawesome-all.css', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );

  • Ich habe das CSS-Stylesheet der Schriftart bearbeitet und die Caches meiner Serverseiten aktualisiert, kann die Schriftart aber immer noch nicht laden. Ich glaube, Ihre Logik ist jetzt richtig, nachdem ich die Pfade überprüft habe, aber es kann nur ein Teil der Lösung sein?

    – Benutzer9353046

    20. Februar 2018 um 13:13 Uhr

  • Es hat die Hälfte des Problems behoben. Inline-Instanzen funktionieren, wie z <i class="fas fa-camera-retro"></i>aber nicht die Pseudoelementinstanz, unter Verwendung des Unicodes, z. B.: .rss-subscribe:before{ font-family: 'Font Awesome 5 Free'; content: "\f09e";} Wenn Sie jedoch der Meinung sind, dass dies ein separates Problem ist, kann ich diese Lösung akzeptieren und sie als separate Frage stellen.

    – Benutzer9353046

    20. Februar 2018 um 13:36 Uhr

  • Es gibt zwei weitere Teile der Lösung, die hier zu finden sind. Aus irgendeinem Grund sind Pseudoelementeinbindungen von Font Awesome in Version 5 standardmäßig ausgeschaltet und müssen per Skript im Header eingeschaltet werden. Zweitens führt das Weglassen der Spezifikation für die Schriftstärke auch dazu, dass die Schriftart verschwindet. Aber Sie haben die Frage allgemein beantwortet und das sind FA-Besonderheiten, also habe ich Ihnen die richtige Antwort gegeben.

    – Benutzer9353046

    20. Februar 2018 um 14:19 Uhr

  • Danke für das Update, @user136649. Ich wollte Ihnen gerade vorschlagen, dies ebenfalls zu überprüfen, nachdem Sie Ihren vorherigen Kommentar gelesen hatten.

    – Cabrerahektor

    20. Februar 2018 um 14:22 Uhr

Neben der all.css-Datei, die zum Rendern der Symbole erforderlich ist, wird auch der Ordner webfonts benötigt.
Geben Sie hier die Bildbeschreibung ein

Dies ist eine der Lösungen für diese Art von Fehler.

1228100cookie-checkFont Awesome kann nicht geladen werden

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy

Contact - Terms and Conditions - Privacy Policy