Font awesome zeigt kein Icon

Ich benutze Font Awesome und möchte CSS nicht mit HTTP hinzufügen. Ich habe Font Awesome heruntergeladen und in meinen Code aufgenommen, aber Font Awesome zeigt statt eines Icons eine umrandete quadratische Box. Hier ist mein Code:Font awesome zeigt kein Icon

<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 man die Symbolanzeige anstelle der umrahmten quadratischen Box machen.

Quelle

2014-11-11 Ganesh

Dies wurde schon oft gefragt. Stellen Sie sicher, dass Sie auch die Schriftart-Dateien enthalten .. nicht nur die CSS http://stackoverflow.com/questions/14366158/font-awesome-not-working-in-chrome – ZimSystem

hier ist der Link zu font-awesome Tourbleithema Handbuch in Git https://github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting – Mehavel

@Skelly Danke. – Ganesh

Ü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 werden sie auch über relative Links bevorzugen. Und Bandbreite zu reduzieren, sondern die Verbindung von Schrift-awesome-Server verwenden:

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

Außerdem, wenn Sie es verwenden, es wird keine Notwendigkeit Hochladen zusätzliche Schriftarten auf Ihren Server und Sie werden sicher sein, dass Sie verweisen auf die richtige CSS Datei, und Sie werden auch sofort von den neuesten Updates profitieren.

Quelle

2014-11-11 15:03:50

Ich habe das gleiche und habe immer noch nur die quadratische Box –

Für den Anfang sollte man nicht beides haben font-awesome.cssundfont-awesome.min.css

, verwenden in der Regel font-awesome.css während der Entwicklung, wechseln dann zu font-awesome.min.css, sobald Sie mit der Website zufrieden sind.

Probleme wie diese werden oft durch relative Pfade und Orte verursacht, also überprüfen Sie, wo Ihre HTML-Datei in Bezug auf die CSS ist.

Wenn Ihre HTML-Datei im Basisverzeichnis ist, und die CSS in einem Unterordner von dem Stamm, würden Sie brauchen: href="./css/font-awesome.css" (Einzelperiode)

Quelle

2014-11-11 15:06:26 paul

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

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

Es bedeutet, dass Sie Fonts Verzeichnis erstellen haben und kopieren Sie Dateien fontawesome-webfont.ttf (fontawesome-webfont.woff, fontawesome-webfont.eot) in diesen Ordner. Danach sollte alles gut funktionieren.

Quelle

2015-04-03 14:47:24 user2980426

Seit mindestens 0.8.1 font-awesome ist nicht referenziert. Es gibt drei "Sommernoten" -Dateien im Font-Ordner mit den Erweiterungen "eot", "ttf" und "woff", die verteilt werden müssen. – ficuscr

Seien Sie vorsichtig, in 4.6.3 (wenn nicht früher) ist es 'Fonts' nicht' Fonts' und auf einer Groß-und Kleinschreibung System, das Probleme verursacht ... – Jason

Dies sollte die richtige Antwort sein. [email protected] – T04435

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

font awesome -> css 
-> fonts

oder der einfachste Weg:

@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 Ordner wie haben müssen

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

Quelle

2015-11-25 14:48:29

Sie mein Freund sind ein Leben und Zeit sparen .. –

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

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

Dadurch werden alle Schriftfamilienregeln für die gesamte Seite überschrieben. Meine Lösung war, den Code so in den Körper zu verschieben.

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

Wichtiger Hinweis: Wenn Sie die !important Flagge in CSS verwenden, andere CSS-Regel wird außer Kraft gesetzt bekommen von der gleichen Art auf dem gleichen Element deklariert.

Quelle

2016-02-19 13:03:17

Ich hatte das gleiche Problem. Du hast meinen Tag gerettet –

das hat den Trick gemacht, danke! – Justin

ja das ist das Problem mit mir –

Möglicherweise haben Sie ein VCS (Git oder 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 Schriften beheben.

Quelle

2017-02-20 22:56:56 rishta

Überprüfen Sie zunächst, ob Sie class = "fa" haben und welche Klasse die Klasse des Symbols ist. 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.

Quelle

2017-03-31 20:51:33 OneMoreQuestion

Ich denke, Sie haben keine Schriftarten-Ordner in Ihrem Stammordner wie wo bleiben css-Ordner.

Demo

und CSS-Ordner ist wie

Und Fonts-Ordner wie

Ich hoffe, es wird für Sie arbeiten.

Vielen Dank.

Quelle

2017-07-23 06:42:58

In meinem Fall: Sie müssen die ganzen font-awesome Ordner zu einem Projekt css-Ordnern und nicht nur die font-awesome.min.css Datei kopieren.

Quelle

2017-10-10 08:29:01 sst

Alle oben genannten sind korrekt aber oben auf, dass mein Problem war, dass ich die kostenlose Version von FA5 heruntergeladen, die nicht haben:

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

ich bekommen konnte nicht v5 ich auf 4,7 zurück arbeiten, so .0 mit Hilfe der obigen Beiträge und es hat mein Problem behoben.

Quelle

2017-12-13 17:00:56 Mickers

Ich hatte Probleme damit, die v5 + von FontAwesome auch zu bekommen. Hatte ihren "webfonts" -Ordner zu "fonts" in der css geändert, und es auf die gleiche Weise platziert, und es hat nicht richtig funktioniert. Ersetzte Dateien mit v4.7.0 und es funktioniert wie ein Zauber. Hrm. –

Font awesome zeigt kein Icon

Antwort

Verwandte Themen