it-swarm.com.de

Font awesome zeigt kein Symbol an

Ich verwende Font Awesome und möchte kein CSS mit HTTP hinzufügen. Ich habe Font Awesome heruntergeladen und in meinen Code eingefügt, doch Font Awesome zeigt anstelle eines Symbols ein rechteckiges Kästchen an. Hier ist mein Code: 

<html>
<head>
<link rel="stylesheet" href="../css/font-awesome.css">
    <link rel="stylesheet" href="../css/font-awesome.min.css">
</head>
<body>
<div style="font-size: 44px;">
   <i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
</div>
</body>
</html>

Ich würde gerne wissen, wie das Symbol anstelle des umrandeten Feldes angezeigt wird.

59
Ganesh

In meinem Fall habe ich den folgenden Fehler in meinem CSS-Code gemacht.

*{
    font-family: 'Open Sans', sans-serif !important;
}

Dadurch werden alle Schriftfamilienregeln für die gesamte Seite überschrieben. Meine Lösung bestand darin, den Code wie folgt in den Hauptteil zu verschieben.

body{
    font-family: 'Open Sans', sans-serif;
}

Hinweis: Wenn Sie das Flag !important in css verwenden, wird jede andere css-Regel, die für denselben Typ im selben Element deklariert ist, überschrieben.

60
Daniel Barde

Wenn Sie font-awesome.min.css öffnen, sehen Sie folgenden Pfad:

'Fonts/fontawesome-webfont.ttf?v=4.2.0' ...

Das bedeutet, dass Sie das Verzeichnis Fonts erstellen und dann die Dateien fontawesome-webfont.ttf (fontawesome-webfont.woff, fontawesome-webfont.eot) in diesen Ordner kopieren müssen. Danach sollte alles gut funktionieren.

43
user2980426

Prüfen Sie zunächst, ob Sie class = "fa" haben und unabhängig von der Klasse des Symbols. Also nicht nur

<i class="fa-pencil" title="Edit"></i>

Aber auch

<i class="fa fa-pencil" title="Edit"></i> 

Dann funktioniert es wie erwartet. Das hat mein Problem gelöst.

19
OneMoreQuestion

Beachten Sie, dass die neue Version (5) von font awesome anstelle des Präfixes "fas""fab" oder "fa" verwendet.

Zitiert von ihrer Website: 

Das fa-Präfix wurde in Version 5 nicht mehr unterstützt. Die neue Standardeinstellung ist der solide Stil und der fantastische Stil für Marken.

Aus diesem Grund zeigten meine Schriften leere Quadrate. Jetzt behoben.

Beispielcode:

<a class="nav-link" href="//www.facebook.com/xxx" target="_blank"><i class="fab fa-facebook-f"></i></a>

Siehe: https://fontawesome.com/icons/facebook-f?style=brands

19
Krisztina

Öffnen Sie Ihren font-awesome.css Theres-Code wie folgt:

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.5.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

sie müssen einen Ordner haben wie:

font awesome -> css
 -> fonts

oder der einfachste Weg:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
15
Erga Kandly

Überprüfen Sie, ob der Pfad zu Ihrer CSS-Datei korrekt ist. Lieber absolute Links bevorzugen, sind sie leichter zu verstehen, da wir wissen, wo wir anfangen und Suchmaschinen sie auch vorziehen werden. Um die Bandbreite zu reduzieren, verwenden Sie lieber den Link von font-awesome Servern: 

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css">

Wenn Sie es verwenden, müssen Sie außerdem keine zusätzlichen Schriftarten auf Ihren Server hochladen und Sie werden sicher sein, dass Sie auf die richtige CSS-Datei zeigen, und Sie profitieren auch sofort von den neuesten Updates.

10

Zunächst sollten Sie nicht beide font-awesome.css und font-awesome.min.css haben.

Verwenden Sie im Allgemeinen font-awesome.css während der Entwicklung und wechseln Sie dann zu font-awesome.min.css, sobald Sie mit der Site zufrieden sind.

Probleme wie dieses werden häufig durch relative Pfade und Speicherorte verursacht. Überprüfen Sie daher, wo sich Ihre HTML-Datei in Bezug auf die CSS befindet.

Wenn sich Ihre HTML-Datei im Basisverzeichnis befindet und sich die Css in einem Unterordner außerhalb des Stammverzeichnisses befindet, benötigen Sie Folgendes: href="./css/font-awesome.css" (einzelne Periode)

3
paul

Alle oben genannten sind korrekt. Darüber hinaus bestand mein Problem darin, dass ich die kostenlose Version von FA5 heruntergeladen habe, die Folgendes nicht enthält:

font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.7.0')

Ich konnte v5 nicht zum Laufen bringen, also bin ich mit Hilfe der obigen Beiträge auf 4.7.0 zurückgekehrt und habe mein Problem behoben.

1
Mickers

In meinem Fall: Sie müssen den gesamten font-awesome-Ordner in Ihren Projektordner css kopieren und nicht nur die font-awesome.min.css -Datei.

1
sst

Ich habe Font Awesome erfolgreich mit ihrem CDN und Javascript installiert (wie auf dieser Seite beschrieben). Dann habe ich versucht, HTML und CSS auf einige ältere Seiten zu kopieren, und plötzlich sah ich leere rechteckige Kästchen anstelle der Symbole.

Ich sah Daniels Antwort (oben) und da meine alte CSS-Datei sehr groß war (und viele Jahre alt war), vermutete ich, dass dies das Problem war. Als ich in Chrome DevTools nachgesehen habe, sah es wirklich so aus, als ob Font Awesome geladen wurde:

 Screenshot of CSS for Font Awesome Icon

Ich hatte erwartet, die Schrift in Strikeout zu sehen, wenn es ein Problem gab ... Allerdings hatte ich alle Optionen wirklich erschöpft. Ich überprüfte die berechneten Stile und stellte klar fest, dass die Schrift Font Awesome definitiv nicht verwendet wurde. (Siehe die gerenderte Schrift unten)

 Font Awesome not being used

Meine alte CSS-Datei war ein Durcheinander und ich zog es vor, sie nicht anzufassen, also habe ich damit geschummelt - bitte erzähle es niemandem :)

<a class="nav-link fa fa-instagram" style="font-family:FontAwesome;" href="//www.instagram.com/xxxx/" target="_blank"></a>

Als ich von Font Awesome Version 4.7.0 auf Version 5.4.1 aufgerüstet bin, ist dieses Problem weggegangen! Ich habe diese Installationsanleitung und dieses HTML verwendet

<a class="nav-link" href="//www.instagram.com/xxxx/" target="_blank"><i class="fab fa-instagram"></i></a>
1
Dagmar

Fügen Sie im font-awesome-4.xfonts-Ordner Ihren Web-App-Ordnern hinzu.

0

ich hatte mit dem gleichen Problem zu tun, als ich herausfand, dass ich die neue Version (5 und Plus) verwenden muss.

benutze diese cdn es wird funktionieren.

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet">
0
Halid

Unter MacOS Mojave hatte ich dieses Problem in Safari. Die fantastischen Schriftbilder funktionierten in Chrome, aber nicht in Safari. Ich war mir also sicher, dass es sich nicht um die Website handelte.

Ich habe sie zum Rendern gebracht, indem ich im Menü "Safari" unter "Einstellungen" die Option "Cross-Site-Tracking verhindern" auf der Registerkarte "Datenschutz" deaktiviert/deaktiviert habe.

Ich bin mir nicht sicher, warum dies behoben wurde, aber es tat es.

0
Michael Shulman

Basiert auf der 5.10.1 Version.

Meine Lösung (lokal):

  1. Wenn Sie "fontawesome.css" oder "fontawesome.min.css" verwenden, verwenden Sie stattdessen "all.css" (im CSS-Ordner).

  2. Der "css" -Ordner und der "webfonts" -Ordner des von Ihnen heruntergeladenen Fontawesome-Pakets müssen sich auf derselben Ebene befinden.

In meinem Fall hatte ich bereits einen CSS-Ordner, daher habe ich den Ordner fontawesome in "css-fa" umbenannt.

Verknüpfen Sie "css-fa" und "webfonts" in meinem CSS-Ordner einfach in Ihrem Texteditor und es sollte funktionieren.

Beispiel: link rel = "Stylesheet" href = "css/css-fa/all.css"

0
Tou Toua Yang
You needed to close your `<link />` 
As you can see in your <head></head> tag. This will solve your problem

<head>
    <link rel="stylesheet" href="../css/font-awesome.css" />
    <link rel="stylesheet" href="../css/font-awesome.min.css" />
</head>
0
Ronnie Web

Ich denke, Sie haben keinen Zeichensatzordner in Ihrem Stammordner wie css-Ordner.

Demo

 enter image description here

Und css Ordner ist wie

 enter image description here

Und Schriftartenordner wie

 enter image description here

Ich hoffe es wird für dich funktionieren.

Danke.

0
Obaidul Haque

Für diejenigen unter Ihnen, die SCSS und das NPM-Paket verwenden, ist hier meine Lösung:

npm i --save @fortawesome/fontawesome-free

Dann oben in einer SCSS-Datei (im Idealfall eine SCSS-Datei, die im Stammverzeichnis Ihrer Anwendung importiert wird):

@import '@fortawesome/fontawesome-free/css/fontawesome.css';
@import '@fortawesome/fontawesome-free/css/all.css';
0
Jeff Diederiks

Sie haben möglicherweise ein VCS (git or somesuch) verwendet, um Symboldateien auf den Server zu übertragen. __ git sagt:

warning: CRLF will be replaced by LF in webroot/fonts/FontAwesome.otf.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.eot.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.ttf.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.woff.
The file will have its original line endings in your working directory.
warning: CRLF will be replaced by LF in webroot/fonts/fontawesome-webfont.woff2.
The file will have its original line endings in your working directory.

Sie müssen wahrscheinlich Ihre Schriftarten korrigieren.

0
rishta

Das Hinzufügen von style='font-weight:normal;' oder eine andere Änderung der Schriftart direkt am Element überschreibt also die .fas{font-weight:900}-Definition in der CSS-Datei von Font Awesome. Ich vermute, die Schriftart hat bestimmte Definitionen in der Schriftartendatei, mit der sie arbeitet. Anscheinend muss der font-weight zwischen 501 und 1000 eingestellt sein, oder die Schriftart sieht aus wie ein quadratischer Block.

0
James Wilkins