Font awesome zeigt kein Symbol an

99

Ich verwende Font Awesome und möchte kein CSS mit HTTP hinzufügen. Ich habe Font Awesome heruntergeladen und in meinen Code aufgenommen, aber Font Awesome zeigt ein umrandetes quadratisches Feld anstelle eines Symbols 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 möchte wissen, wie das Symbol anstelle des umrandeten quadratischen Felds angezeigt wird.

html css font-awesome Ganesh
quelle

5

Dies wurde schon oft gefragt. Stellen

Zim

Hier ist der Link zu Font-Awesome Tourbleshooting Guide in Git github.com/FortAwesome/Font-Awesome/wiki/Troubleshooter

Mehavel

Bitte aktualisieren Sie die Frage mit Ihrer Ordnerstruktur, in der Sie den Ordner font-awesome haben. Wir können also feststellen, dass "font-awesome.min.css" den ttf-Pfad korrekt erhält oder nicht. Nur CSS würde nicht funktionieren.

Ajit Hogade

stackoverflow.com/a/42355738/397872

Rishta

83

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

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

Dadurch werden alle Regeln der Schriftfamilie für die gesamte Seite überschrieben. Meine Lösung bestand darin, den Code so in den Körper zu verschieben.

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

NB: Immer wenn Sie das !importantFlag in CSS verwenden, wird jede andere CSS-Regel, die vom selben Typ für dasselbe Element deklariert wurde, überschrieben.

Daniel Barde
quelle

4

Das war die Lösung für mich. Ich hatte *{font-family: Raleway}und ich änderte es zu*.not(i) {font-family: Raleway}

fungusanthrax

Ich hatte dieses Problem auch, aber ich habe es lange nicht bemerkt, weil es in DevTools wirklich so aussah, als würde FontAwesome verwendet. Siehe meine Antwort für weitere Details.

Dagmar

59

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

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

Dies bedeutet, dass Sie ein Verzeichnis erstellen Fontsund dann Dateien fontawesome-webfont.ttf( fontawesome-webfont.woff, fontawesome-webfont.eot) in diesen Ordner kopieren müssen . Danach sollte alles gut funktionieren.

user2980426
quelle

Da mindestens 0.8.1 font-awesome nicht referenziert wird. Es gibt drei summernoteDateien in Font - Verzeichnis mit Erweiterungen eot, ttfund woffdass Bedarf verteilt werden.

Ficuscr

2

Seien Sie vorsichtig, in 4.6.3 (wenn nicht früher) ist es fontsnicht Fontsund auf einem System mit Groß- und Kleinschreibung, das Probleme verursacht ...

Jason

1

Warum sagt Font Awesome es nicht auf ihrer Website? es ist wirklich nicht explizit.

Matt

Genial! Ich dachte, die Schriftarten müssten sich im selben Ordner wie das CSS befinden, sie müssten eine Ordnerebene höher sein.

Giovani Vercauteren

Stellen Sie außerdem sicher, dass Ihre Bibliothek auf dem neuesten Stand ist. Ich hatte alle meine Logos außer dem Bandcamp-Logo. Nachdem ich die aktualisierte Version 4.7 heruntergeladen und die Dateien ersetzt hatte, funktionierte sie.

Ryan Walker

45

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

Zitiert von ihrer Website:

Das fa-Präfix ist in Version 5 veraltet. Die neue Standardeinstellung ist der fas solid style und der fab style für Marken.

Aus diesem Grund zeigten meine Schriftarten 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

krystonen
quelle

Das hat es für mich getan! Seltsam, dass es nicht in den Dokumenten aktualisiert wurde

GroomedGorilla

Dies war das einzige, was funktionierte. Wenn Sie eine moderne Version verwenden, verwenden Sie diese.

Samurdhilbk

LEBENSRETTER! Wechsel zu "fa fa-Bars" borked

böse

Vielen Dank, für mich wirken einige Symbole mit fas und andere mit fab, zum Beispiel fab fa-twitter ist in Ordnung, aber fas fa-twitter zeigt ein weißes Quadrat, go figure!

user1620090

Also, wenn die neue Version fas ist, warum muss ich dann meine Klassen von 'fas' auf 'fa' ändern

Sam

22

Überprüfen Sie zunächst, ob Sie class = "fa" sowie die Klasse des Symbols haben. 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. Dies löste mein Problem.

Noch eine Frage
quelle

1

Das hat bei mir funktioniert. Für mich funktionierte der fabelhafte Umschlag nicht, aber dann funktionierte der fa-Umschlag. Sehr seltsam, aber mein Problem behoben.

Jordan Schütz

@JordanSchuetz "fab" ist spezifisch für Markensymbole wie "fab fa-facebook-f". In den neueren Versionen finden Sie "fas" für die "solide" Variante, sodass Ihre Variante in den neueren Versionen auf "fas fa-Envelope" oder in einer älteren auf "fa fa-Envelope" festgelegt wird.

Tessa

20

Öffnen Sie Ihre font-awesome.css theres Code wie:

@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 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">

Erga Kandly
quelle

11

Überprüfen Sie, ob der Pfad zu Ihrer CSSDatei korrekt ist. Bevorzugen Sie eher absolute Links, sie sind leichter zu verstehen, da wir wissen, wo wir anfangen, und Suchmaschinen sie auch relativen Links vorziehen. Und um die Bandbreite zu reduzieren, verwenden Sie lieber den Link von Servern mit hervorragenden Schriftarten:

<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 keine zusätzlichen Schriftarten auf Ihren Server hochladen, und Sie können sicher sein, dass Sie auf die richtige CSSDatei verweisen. Außerdem profitieren Sie sofort von den neuesten Updates.

Valentin Mercier
quelle

10

Ich habe das gleiche getan und habe immer noch nur eine quadratische Box

Vipul Hadiya

5

Ich hatte mit dem gleichen Problem zu tun, als ich herausfand, dass ich eine neue Version (5 und höher) verwenden muss.

Verwenden Sie diese CDN, es wird funktionieren.

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

Halid
quelle

4

Für den Anfang sollten Sie nicht beide font-awesome.css und haben font-awesome.min.css

Im Allgemeinen font-awesome.csswährend der Entwicklung verwenden und dann zu wechseln, font-awesome.min.csssobald Sie mit der Site zufrieden sind.

Probleme wie diese werden häufig durch relative Pfade und Speicherorte verursacht. Überprüfen Sie daher, wo sich Ihre HTML-Datei in Bezug auf das 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: href="./css/font-awesome.css"(einzelne Periode)

paul
quelle

4

Alle oben genannten Punkte sind jedoch korrekt. Außerdem war mein Problem, dass ich die kostenlose Version von FA5 heruntergeladen habe, die nicht über Folgendes verfügt:

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

Ich konnte v5 nicht zum Laufen bringen, also kehrte ich mit Hilfe der obigen Beiträge zu 4.7.0 zurück und mein Problem wurde behoben.

Mickers
quelle

1

Ich hatte Probleme damit, die Version 5 von FontAwesome ebenfalls zum Laufen zu bringen. Hatte ihren "Webfonts" -Ordner im CSS in "Fonts" geändert und ihn auf die gleiche Weise platziert, und es funktionierte nicht richtig. Ersetzte Dateien durch v4.7.0 und es funktioniert wie ein Zauber. Hrm.

Lisa Cerilli

1

In Version 5 ist die Schriftfamilie für die Symbole nicht mehr "FontAwesome". In der kostenlosen Version ist es jetzt "Font Awesome 5 Free" und "Font Awesome 5 Pro" in der Pro-Version. Ich hatte dieses Problem, als ich die Zeichencodes an einigen Stellen manuell verwendete, und sie funktionierten nicht mehr, weil die Schriftfamilie nicht festgelegt war.

Tessa

4

Ich hatte das gleiche Problem. Anstatt die Schrift großartig herunterzuladen, habe ich einen Link in meinen HTML-Code eingefügt und es hat funktioniert.

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js" integrity="sha256-2JRzNxMJiS0aHOJjG+liqsEOuBb6++9cY4dSOyiijX4=" crossorigin="anonymous"></script>

Erweitern Sie das Snippet

Hrithik Verma
quelle

Vielen Dank, ich verbringe 24 Stunden damit, dieses Problem zu beheben

Mathew Magante

2

Ich habe Font Awesome erfolgreich mit ihrem CDN und Javascript Include 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 quadratische Kästchen anstelle der Symbole.

Ich sah Daniels Antwort (oben) und da meine alte CSS-Datei riesig (und Jahre alt) war, vermutete ich, dass dies das Problem war. Als ich jedoch in Chrome DevTools nachgesehen habe, sah es wirklich so aus, als wäre Font Awesome geladen:

Ich hatte erwartet, die Schriftart im Strikeout zu sehen, wenn es ein Problem gab ... Ich hatte jedoch alle meine Optionen wirklich ausgeschöpft, also habe ich die berechneten Stile überprüft und festgestellt, dass die Schriftart Font Awesome definitiv nicht verwendet wurde. (Siehe die gerenderte Schriftart unten)

Meine alte CSS-Datei war ein Chaos und ich zog es vor, sie nicht zu berühren, also habe ich betrogen - bitte sag es niemandem :)

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

Zu beachten ist auch, dass beim Upgrade von Font Awesome Version 4.7.0 auf Version 5.4.1 dieses Problem behoben wurde! Ich habe diese Setup-Anleitung und diesen HTML-Code verwendet

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

Dagmar
quelle

2

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 (idealerweise eine SCSS-Datei, die im Stammverzeichnis Ihrer Anwendung importiert wurde):

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

Jeff Diederiks
quelle

Interessantes Hinzufügen @fortawesome/fontawesome-free/css/all.cssbehoben

Andy Braham

1

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

sst
quelle

1

Es scheint also, dass das Hinzufügen style='font-weight:normal;'oder anderweitige Ändern der Schriftart direkt auf dem Element die .fas{font-weight:900}Definition in der CSS-Datei von Font Awesome überschreibt . Ich denke, die Schriftart hat bestimmte Definitionen in der Schriftartdatei, mit der sie arbeitet. Es scheint, font-weightdass das zwischen 501 und 1000 eingestellt werden muss, oder die Schrift sieht aus wie ein quadratischer Block.

James Wilkins
quelle

1

Mein Problem war das mit den meisten Stimmen

*{
font-family: xxxxx
}

Ein Wechsel in dieses Problem löste das Problem

body{
font-family: xxxx
}

Jamsheer
quelle

0

Möglicherweise haben Sie ein VCS (Git oder ähnliches) 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 reparieren.

Rishta
quelle

0

Ich denke, Sie haben keinen Schriftartenordner in Ihrem Stammordner wie wo bleiben CSS-Ordner.

Demo

Und CSS-Ordner ist wie

Und Schriftarten wie

Ich hoffe es wird für dich funktionieren.

Danke.

Obaidul Haque
quelle

0

Unter MacOS Mojave hatte ich dieses Problem in Safari. Die font-fantastischen Bilder funktionierten in Chrome, aber nicht in Safari, daher war ich mir sicher, dass es nicht die Website war.

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

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

Michael Shulman
quelle

0

Basierend auf der Version 5.10.1.

Meine Lösung (lokal):

Wenn Sie "fontawesome.css" oder "fontawesome.min.css" verwenden, versuchen Sie stattdessen "all.css" (im CSS-Ordner).
Der Ordner "css" und der Ordner "webfonts" aus dem von Ihnen heruntergeladenen fontawesome-Paket müssen sich auf derselben Ebene befinden.

In meinem Fall hatte ich bereits einen CSS-Ordner, also habe ich den fontawesome CSS-Ordner einfach in "CSS-Fa" umbenannt.

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

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

Tou Toua Yang
quelle

0

Das Ändern der gezielten! Wichtigen Auswahl der Schriftfamilie von * { ... } auf wurde behoben *:not(i) { ... }

(mit scss Präprozessor); Ich hoffe du hast es gelöst

backciro
quelle

0

Der folgende Code ist font-awesome 4.70.0. Klicken Sie hier, um zu font-awesome 5.11.2 zu gelangen .

<!DOCTYPE html>

<html>

<head>

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

</head>

<body>

<i class="fa fa-camera-retro" aria-hidden="true"></i>

</html>

PythonMaster202
quelle

0

Ich verwende FontAwesome Pro und die Lösung für mich war einzubetten all.min.cssstatt fontawesome.min.css.

Bruno Leveque
quelle

0

Ich folgte diesem Tutorial, um Font Awesome Pro 5.13 selbst zu hosten.

https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

Aus irgendeinem Grund konnte ich nicht <link href="%PUBLIC_URL%/font-awesome/all.min.css" rel="stylesheet">laden webfonts, was wiederum dazu führte, dass nur Quadrate auftauchten. Aber als ich es benutzte <script defer src="%PUBLIC_URL%/font-awesome/all.min.js"></script>, fing alles an zu funktionieren. Beide Links wurden in HTML hinzugefügt <head>.

Ogglas
quelle

Das Problem mit diesem js ist, dass die Datei zu schwer geladen ist

exequielc

0

Ich habe versucht, mit scss fa 5.0.13 zu drupal 8 hinzuzufügen. Die Stile sind standardmäßig nicht in der Haupt-Fa.scss enthalten und mussten manuell hinzugefügt werden.

@import "libraries/fontawesome/fa-brands";
@import "libraries/fontawesome/fa-light";
@import "libraries/fontawesome/fa-regular";
@import "libraries/fontawesome/fa-solid";

Bonkisama
quelle

0

Sie müssen die Datei font-awesome in den CSS-Ordner legen und ändern

href = "../ css / font-awesome.css" bis href = "css / font-awesome.css"

Noch eine Sache Sie können diese Font-awesome CSS-Datei ersetzen und diese ausprobieren

.social-media{
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

.social-media li .fa{ 
  background: #fff;
  color: #262626;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  text-align:center;
  line-height:50px; 
}

.social-media .fa:hover { 
  box-shadow: 5px 5px 5px #000; 
}

.social-media .fa.fa-twitter:hover{
  background:#55acee;
  color:#fff;
 
}

.social-media .fa.fa-facebook:hover{
  background:#3b5998;
  color:#fff;
}

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

<ul class="social-media">
  <li><i class="fa fa-twitter fa-2x"></i></li>
  <li><i class="fa fa-facebook fa-2x"></i></li>
 
</ul>

Erweitern Sie das Snippet

sani
quelle

0

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js" integrity="sha256-2JRzNxMJiS0aHOJjG+liqsEOuBb6++9cY4dSOyiijX4=" crossorigin="anonymous"></script>

Erweitern Sie das Snippet

De Zin Htang
quelle

Ich arbeite

-1

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>

Ronald Namwanza
quelle

-1

Achten Sie auf Bootstrap! Bootstrap überschreibt .fa-Klassen. Wenn Sie beide Pakete separat einbringen und denken: "Ich verwende Bootstrap für die reaktionsschnelle Blockbehandlung und Font-Awesome für Symbole", müssen Sie die .fa-Klassen in Bootstrap ansprechen, damit sie den Stand von Font-Awesome nicht beeinträchtigen. alleinige Umsetzung.

Beispiel: Die Schriftfamilie 'FontAwesome' in Bootstrap stört die Schriftfamilie 'Font Awesome 5 Free' in Font-Awesome und Sie erhalten ein weißes Kästchen anstelle des gewünschten Symbols.

Es gibt vielleicht sauberere Möglichkeiten, damit umzugehen, aber wenn Sie die Checkliste durchgesehen haben, um das Problem mit der "weißen Kiste" zu beheben, und es immer noch nicht herausfinden können (wie ich), ist dies möglicherweise die Antwort, nach der Sie suchen zum.

jtubre
quelle

Warum die Abstimmung ablehnen? Es ist ein Randfall, aber es ist eine Ursache, die anderswo nicht leicht zu finden ist.

Jtubre

-1

In meinem Fall wurde das Problem durch die Verwendung einiger regulärer Stile ( far) verursacht, die nicht im freien Satz enthalten sind. Ändern, um fases zu beheben.

Yngve Høiseth
quelle

Font awesome zeigt kein Symbol an

Antworten: