Font Awesome funktioniert nicht, Symbole werden als Quadrate angezeigt

224

Ich versuche also, eine Marketing-Seite als Prototyp zu erstellen, und verwende Bootstrap und die neue Font Awesome-Datei. Das Problem ist, dass, wenn ich versuche, ein Symbol zu verwenden, auf der Seite nur ein großes Quadrat gerendert wird.

So füge ich die Dateien in den Kopf ein:

<head>
        <title>Page Title</title>
        <link rel="stylesheet" href="css/bootstrap.css">
        <link rel="stylesheet" href="css/bootstrap-responsive.css">
        <link rel="stylesheet" href="css/font-awesome.css">
        <link rel="stylesheet" href="css/app.css">
        <!--[if IE 7]>
            <link rel="stylesheet" href="css/font-awesome-ie7.min.css">
        <![endif]-->
</head>

Und hier ist ein Beispiel, wie ich versuche, ein Symbol zu verwenden:

<i class="icon-camera-retro"></i>

Aber all das wird auf einem großen Quadrat gerendert. Weiß jemand, was los sein könnte?

css  html  twitter-bootstrap  font-awesome 
— Connor Black
quelle
1
Importieren Sie die Schriftart?
— Mayhewr
1
Wahrscheinlich nicht. Ich dachte, Sie müssten nur die .cssDatei einschließen .
— Connor Black
2
Der Titel impliziert, dass das Problem spezifisch für Chrome ist. Wird es in anderen Browsern geladen oder wird in der referenzierten Schriftartdatei ein 404 angezeigt?
— Cimmanon
1
Kann Schritt 3 auf dem obigen Link ab August 2016 nicht finden ... Weiterleitungen?
— Saurabh Tiwari
1
Wahrscheinlich haben Sie vergessen, den Webfont-Ordner zu kopieren?
— Entithat

Antworten:

149

Gemäß der Dokumentation (Schritt 3) müssen Sie die mitgelieferte CSS-Datei so ändern, dass sie auf die Schriftartposition auf Ihrer Site verweist.

— Mayhewr
quelle
5
Gute Antwort, nur um einige zusätzliche Informationen zu geben. Sie können die Schriftarten auch in den vom CSS bereitgestellten Standardpfad einfügen. Öffnen Sie einfach Font-awesome.css und Sie finden den folgenden Eintrag: @ font-face {font-family: 'FontAwesome'; src: url ('../ font / fontawesome-webfont.eot? v = 3.2.1'); src: url ('../ font / fontawesome-webfont.eot? # iefix & v = 3.2.1')
— Braulio
1
Nur für zukünftige ASP.NET MVC-Reader mit demselben Problem: Wenn Sie alle Ordner am richtigen Ort haben, überprüfen Sie, ob Sie den MIME-Typ in Ihre web.config-Datei eingefügt haben, wie hier gezeigt: stackoverflow.com/questions/4015816/…
— jpgrassi
1
Wenn Sie das Daten-URI-Schema mit einer base64-Version der Schriftart verwenden (die problemlos online konvertiert werden kann), müssen Sie sich nicht um den richtigen Dateipfad und das richtige Hosting von Ressourcen kümmern.
— RenaissanceProgrammer
Hinweis : Wenn Sie das CSS nicht ändern möchten, legen Sie einfach CSS und Schriftarten in denselben Ordner. Überprüfen Sie dies
— Shaijut
7
@tutuca: Nicht jeder kann ein CDN verwenden.
— Leichtigkeitsrennen im Orbit
188

Sie müssen zwei Klassen, die faKlasse und die Klasse, identifiziert das gewünschte Symbol fa-twitter, fa-searchusw ...

<!-- Wrong -->
<i class="fa-search"></i>    

<!-- Correct -->
<i class="fa fa-search"></i>
— Nabil Kadimi
quelle
4
Dies sollte die Top-Antwort, die CSS - Punkte an die richtige Stelle für die Schriftart - Dateien bereitgestellt , so lange , wie Sie sie bewegen nicht - das mir fuhr die Wand danke
— alex3410
5
Hinweis: "Das fa-Präfix ist in Version 5 veraltet. Die neue Standardeinstellung ist der fas solid style und der fab style für Marken."
— Terje Solem
1
Das hat es für mich behoben! Ich verwende Angular (5, glaube ich) zusammen mit primeng und es scheint, dass font-awesome bereits für zB MenuItem-Definitionen in xx.component.ts funktioniert hat (die Symbole wurden korrekt gerendert). Allerdings: Wenn etwas zu xx.component.html (zB p-Taste mit einem Symbol) hinzufügen, ein muss hinzufügen fa Klasse und FA- <was Symbol>!
— Igor
1
@TerjeSolem Die Informationen, die Sie gegeben haben, sind sehr wichtig. Es hat mein Problem gelöst. Ich habe eine ältere Version verwendet, aber "fas" verwendet. Danke
— MindRoasterMir
🤦‍♂️ Vielen Dank! Ich habe das gleiche mit offenen Symbolen oi oi -... Verlor das erste oi.
— Alexandr
54

Benutze das 

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

Ich hatte ein ähnliches Problem mit Amazon Cloudfront CDN, das jedoch behoben wurde, nachdem ich mit dem Laden von maxcdn begonnen hatte

— Kumar Deepam
quelle
6
Dies setzt voraus, dass Sie das CDN von font-awesome verwenden möchten. Für eine kommerzielle Produktionsumgebung würde ich dies nicht tun.
— Jay Edwards
48

Dies kann hilfreich sein. Überprüfen Sie, ob Sie die Schriftfamilie auf dem Symbol nicht versehentlich geändert haben . Wenn Sie die Schriftfamilie des .fa-Elements geändert haben von: FontAwesome, wird das Symbol nicht angezeigt. Es ist immer etwas Dummes und Kleines.

Hoffe das hilft jemandem.

— Bren1818
quelle
11
BINGO! Vielen Dank. Metro-UI hat die font-awesome-Schriftfamilie überschrieben. Ich musste folgendes hinzufügen: .fa {Schriftfamilie: 'FontAwesome'! Wichtig; } dann hat es geklappt.
— Debbie A
1
Ja. Dumm und klein. Dies - das Ändern der Schriftart für etwas anderes und das Beeinflussen von Schriftarten-Symbolen - ist mir so oft passiert, dass es dumm wird.
— Edd
2
Ja - diese Zeile war schuld (genauer gesagt die! Wichtige Regel): * {Schriftfamilie: 'Source Sans Pro'! Wichtig}
— Svet
1
Dies ist der wichtigste und nützlichste Tipp zur Verwendung von Font Awesome, um Zeitverlust bei der Suche nach Problemen zu vermeiden.
— Dezember
22

Wenn Sie LESS oder SASS verwenden, öffnen Sie die Datei font-awesome.less / sass und bearbeiten Sie die Pfadvariable, die @fa-font-path: "../font";auf die tatsächlichen Schriftarten verweist:

@fa-font-path: "../font";

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

Gleiches gilt für CSS, außer dass Sie den Pfad im Deklarationsblock @ font-face bearbeiten:

@font-face {
  font-family: 'FontAwesome';
  src: url('your/path/fontawesome-webfont.eot?v=3.0.1');
  src: url('your/path/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
    url('your/path/fontawesome-webfont.woff?v=3.0.1') format('woff'),
    url('your/path/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
  font-weight: normal;
  font-style: normal;
}
— jonschlinkert
quelle
Gibt es eine Möglichkeit, nur bestimmte Symbole anstelle aller zu importieren? Ich möchte meine CSS-Datei nur mit wenigen Symbolen kompilieren.
— user805981
@fa-font-path: "../fonts";arbeitete für mich. (Beachten Sie die fehlenden shinzugefügt)
— Programmierer
18

Ö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
13

Ich habe versucht, das gleiche Problem mit einigen früheren Lösungen zu lösen, aber sie haben in meiner Situation nicht funktioniert. Schließlich habe ich diese 2 Zeilen in HEAD hinzugefügt und es hat funktioniert:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css">
— Vojkan Cvijanovic
quelle
12

Ich benutze Font Awesome 4.3.0nur die Verknüpfung von maxcdn funktioniert wie hier erwähnt ,

Aber das Hosten auf Ihrem Server, indem ich Schriftarten und CSS in denselben Ordner legte, funktionierte für mich wie folgt

Geben Sie hier die Bildbeschreibung ein

dann verlinke einfach das css:

<link href="~/fonts/font-awesome.min.css" rel="stylesheet" />

Hoffnung hilft jemandem.

— Shaijut
quelle
8

Sie müssen 2 Klassen haben, die fas-Klasse und die fa-Klasse, vielleicht funktioniert das:

// Wrong
<i class="fas fa-search"></i>    

// Correct
<i class="fa fa-search"></i>
— Israel
quelle
3
Wusste das nicht - ab Version 5 benötigen sie jetzt eine faboder fasKlasse anstelle der faKlasse.
— Echilon
7

Ich hatte dieses Problem. Das Problem war, dass ich einen CSS-Stil der Schriftfamilie hatte, bei dem es wichtig war, die Schriftart zu überschreiben.

— Jonny White
quelle
Ich hatte das gleiche Problem mit * {Schriftfamilie: Helvetica, serifenlos! Wichtig; }
— Dubbo
6

Wenn Sie mit Maven und Apache Wicket arbeiten, überprüfen Sie außerdem Folgendes, um das Problem mit Font-Awesome und nicht geladenen Symbolen zu beheben:

Wenn Sie Ihre Dateien beispielsweise in der folgenden Dateistruktur abgelegt haben

/src
 /main
  /java
   /your
    /package
     /css
      font-awesome.css
     /font
      fontawesome-webfont.eot
      fontawesome-webfont.svg
      fontawesome-webfont.svgz
      fontawesome-webfont.ttf
      fontawesome-webfont.woff

Überprüfen Sie 1) Verwenden Sie einen Package Resource Guard korrekt, um das korrekte Laden der Schriftdateien zu ermöglichen?

Beispiel aus Ihrer Klasse, die WebApplication erweitert:

@Override
public void init() {
    super.init();   
    get().getResourceSettings().setPackageResourceGuard(new PackageResourceGuard());

}

Überprüfen Sie 2) Nachdem Sie sichergestellt haben, dass alle Schriftarten korrekt in den Webbrowser übertragen wurden, überprüfen Sie, was tatsächlich in den Webbrowser übertragen wurde. Hat sich die Integrität der Schriftdateien geändert? Vergleichen Sie die Dateien in Ihrem Quellverzeichnis und die in den Webbrowser übertragenen Dateien, z. B. mithilfe der Web Developer Toolbar von Firefox und DiffDog (zum Dateivergleich).

Insbesondere wenn Sie Maven verwenden, sollten Sie die Ressourcenfilterung beachten. Filtern Sie nicht den Ordner, in dem sich Ihre / font-Dateien befinden. Andernfalls werden sie beschädigt.

Beispiel aus Ihrer pom.xml

<build>
    <finalName>Your project</finalName>
    <resources>
        <resource>
            <filtering>true</filtering>
            <directory>src/main/resources</directory>
        </resource>
        <resource>
            <filtering>false</filtering>
            <directory>src/main/java</directory>
            <includes>
                <include>**</include>
            </includes>
            <excludes>
                <exclude>**/*.java</exclude>
            </excludes>
        </resource>
    </resources>
</build>

Im obigen Beispiel filtern wir nicht den Ordner src / main / java, in dem die CSS- und Font-Dateien enthalten sind.

Weitere Informationen zum Filtern von Binärdaten finden Sie auch in der Dokumentation:

http://maven.apache.org/plugins/maven-resources-plugin/examples/filter.html

Insbesondere warnt die Dokumentation: " Warnung: Filtern Sie keine Dateien mit binärem Inhalt wie Bilder! Dies führt höchstwahrscheinlich zu einer beschädigten Ausgabe. Wenn Sie sowohl Textdateien als auch Binärdateien als Ressourcen haben, müssen Sie zwei sich gegenseitig ausschließende Ressourcensätze deklarieren. Der erste Ressourcensatz definiert die zu filternden Dateien und der andere Ressourcensatz definiert die Dateien, die unverändert kopiert werden sollen ... "

— Philipp
quelle
6

Ich hatte dieses Problem und ging jeden Schritt sorgfältig durch ... obwohl ich FA schon seit Ewigkeiten benutze ... und dann wurde mir klar, dass ich diese Zeile in meiner Mail-CSS-Datei hatte:

* {
font-family: Arial !important;
}

Dummer Fehler, aber das könnte in Zukunft jemandem einen Tipp geben!

— J Doe
quelle
4

Sie müssen den Header Access-Control-Allow-Origin für Ihre Schriftdateien auf * zurücksetzen

— tronic
quelle
2
Genau! Die Verwendung von Drittanbietern zur Bereitstellung Ihrer fantastischen Schriftdateien löst Ihr Problem nicht. Sie geben es lediglich an andere weiter, um es zu lösen.
— Simanas
4

Ab Dezember 2018 fällt es mir leichter, die stabile Version 4.7.0 zu verwenden, die auf bootstrapcdn gehostet wird, anstatt die font-fantastische 5.xx-CDN auf ihrer Website - da jedes Mal, wenn sie kleinere Versionen aktualisieren, die vorherige Version kaputt geht.

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

Symbole sind die gleichen:

<i class="fa fa-facebook"></i>
— ehacinom
quelle
3

Wenn Ihr Server IIS ist, stellen Sie sicher, dass Sie das richtige MIME für die .woff-Dateierweiterung hinzufügen. Das richtige MIME istapplication/octet-stream

— Dario Brignone
quelle
Wenn Sie IIS 7 verwenden, können Sie die folgenden
— Schritte ausführen
3

font-weight: 900;

Ich hatte ein anderes Problem mit Font Awesome 5. Die Standardschriftgröße sollte 900 für FontAwesome-Symbole sein, aber ich habe es für span- und i-Tags auf 400 überschrieben. Es hat einfach funktioniert, als ich es korrigiert habe.

Hier ist die Referenz zum Problem auf der Github-Seite https://github.com/FortAwesome/Font-Awesome/issues/11946

Ich hoffe es wird jemandem helfen.

— Manian
quelle
1
Danke, das war auch mein Problem. Ich habe die Schriftfamilie auf "Font Awesome 5 Free" eingestellt, aber ich musste auch die Schriftgröße auf 900 einstellen!
— Hans Vonn
3

Wenn Sie die Version 5. * oder höher verwenden, müssen Sie die verwenden

all.css oder all.min.css

Das Einschließen der Datei fontawesome.css funktioniert nicht, da kein Verweis auf den Ordner " webfonts " und kein Verweis auf "@ font-face" oder "font-family" vorhanden ist

Sie können dies überprüfen, indem Sie den Code nach der Eigenschaft font-family in fontawesome.css oder fontawesome.min.css durchsuchen

— the_haystacker
quelle
Dieser war die perfekte Lösung für mich - schade, dass die Antwort so weit unten ist, dass ich sie nicht gesehen habe und sie selbst
— herausfinden musste
2

Möglicherweise ist Ihr Schriftpfad nicht korrekt, sodass CSS die Schrift nicht laden und die Symbole nicht rendern kann, sodass Sie den gestrandeten Pfad der angehängten Schriftarten angeben müssen.

@font-face { 
font-family: "FontAwesome";
src: url("fonts/fontawesome-webfont.eot");
}
— SantoshK
quelle
2

Ab Version 5, wenn Sie das Paket von dieser Site heruntergeladen haben:

https://fontawesome.com/download

Die Schriftarten befinden sich in den Dateien all.css und all.min.css.

So würde Ihre Referenz jetzt mit der neuesten Version aussehen (durch Ihren Ordner ersetzen):

<link href="/MyProject/Content/fontawesome-free-5.10.1-web/css/all.min.css" rel="stylesheet">
— Live-Liebe
quelle
2

Nachdem ich mich bemüht hatte, eine Lösung zu finden und die offizielle Dokumentation NICHT hilfreich fand, löste dies das Problem für mich:

  1. Laden Sie die Datei Fontawesome.zip herunter. Ich verwende Version 5.10.2 und habe sie von hier https://fontawesome.com/download erhalten

  2. In der Zip-Datei befinden sich mehrere Ordner. Sie benötigen nur CSS- und Webfonts-Ordner Geben Sie hier die Bildbeschreibung ein

    1. Erstellen Sie 2 Ordner in Ihren Webprojekten und nennen Sie sie CSS und Webfonts. Geben Sie hier die Bildbeschreibung ein

Diese Namen sind obligatorisch. Kopieren Sie nun den Inhalt von CSS und Webfonts aus der Zip-Datei in die entsprechenden Ordner in Ihrem Projekt. Und das ist alles!

Vorsicht vor Fontawesome! Awesomeness macht es dem Benutzer einfach!

— BabaNew
quelle
1

Ich habe von 3.2.1 auf 4.0.1 geändert und der Ordner war Schriftart und heißt jetzt Schriftarten.

src: url ('../ font / fontawesome-webfont.eot? v = 3.2.1');

src: url ('../ fonts / fontawesome-webfont.eot? v = 4.0.1');

Ich hoffe es hilft jemandem.

— André Duarte
quelle
1

Ich verwende die offizielle Schriftart Awesome SASS Ruby Gem und habe den Fehler behoben, indem ich die folgende Zeile zu meiner application.css.scss hinzugefügt habe

@import "font-awesome-sprockets";

Erläuterung:

Die Font-Awesome-Sprockets-Datei enthält die Sass-Helfer-Assass-Funktionen für Sprockets, mit denen der richtige Pfad zur Font-Datei gefunden wird.

— Marklar
quelle
1

wenn du sass verwendest und in deine main.scss importiert hast @import '../vendor/font-awesome/scss/font-awesome.scss';

Der Fehler kann von der Datei font-awesome.scss herrühren, die nach den Schriftdateien in ihrem relativen Pfad sucht.

Denken Sie also daran , die Variable $ fa-font-path zu überschreiben: $fa-font-path: "https://netdna.bootstrapcdn.com/font-awesome/4.3.0/fonts" !default;

Auf diese Weise müssen Sie die CDN nicht in Ihre index.html einfügen

— vilsbole
quelle
1

Überprüfen Sie die Datei fontawesome-all.css noch einmal - ganz unten befindet sich ein Pfad zum Ordner webfonts. Meins hatte das Format "../webfonts", was bedeutete, dass die CSS-Datei von ihrem Standort aus 1 Ebene höher aussehen würde. Da sich alle meine CSS-Dateien im CSS-Ordner befanden und ich die Schriftarten demselben Ordner hinzufügte, funktionierte dies nicht.

Verschieben Sie einfach Ihren Schriftartenordner um eine Ebene nach oben und alles sollte in Ordnung sein :)

Getestet mit Font Awesome 5.0

— Ross
quelle
Dies sollte die bevorzugte Antwort sein, da sie die Frage direkt beantwortet, ohne auf veraltete Dokumentation zu verweisen. Kudos
— Kyle Champion
1

Ich hatte das gleiche Problem mit der Schriftart awesome 5, die mit Garn heruntergeladen wurde. Ich habe die Datei min.css ALONG mit der Datei all.js hinzugefügt.

Hoffe das hilft jemandem jemandem

<link  rel="stylesheet"   href="node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css">
<script src="node_modules/@fortawesome/fontawesome-free/js/all.js" charset="utf-8"></script>
— Enrique Martinez
quelle
1

Die Datei /css/all.css enthält das Kerndesign sowie alle Symbolstile, die Sie für die Verwendung von Font Awesome benötigen. Der Ordner / webfonts enthält alle Schriftdateien, auf die das obige CSS verweist und von denen es abhängt.

Kopieren Sie den gesamten Ordner / webfonts und die Datei /css/all.css in das statische Assets-Verzeichnis Ihres Projekts (oder wo immer Sie Front-End-Assets oder Vendor-Inhalte behalten möchten).

Fügen Sie einen Verweis auf die kopierte Datei /css/all.css in jede Vorlage oder Seite ein, für die Sie Font Awesome verwenden möchten.

Besuchen Sie einfach - https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself Sie erhalten die Antwort.

— Dipesh Chauhan
quelle
0

Die Verwendung von absoluten anstelle von relativen Pfaden hat es für mich gelöst. Ich habe relative Pfade verwendet (siehe erstes Beispiel unten) und das hat nicht funktioniert. Ich überprüfte über die Konsole und stellte fest, dass der Server einen 404 zurückgab, Dateien nicht gefunden.

Relativer Pfad verursachte eine 404: 

@font-face { 
font-family: "FontAwesome";
src: url("../fonts/fontawesome-webfont.eot?v=4.0.3");
}

Absoluter Pfad löste es browserübergreifend:

@font-face { 
font-family: "FontAwesome";
src: url("http://www.mysite.com/fonts/fontawesome-webfont.eot?v=4.0.3");
}

Ich würde dies nicht empfehlen, es sei denn, Sie müssen, aber es funktioniert für mich. Natürlich sollten Sie dies für alle Schriftformate in der Datei font-awesome.css wiederholen.

— Tim
quelle
0

Es hat bei mir nicht funktioniert, weil ich eine Allow from noneDirektive für das Stammverzeichnis in meiner Apache-Konfiguration hatte. Hier ist, wie ich es zum Laufen gebracht habe ...

Meine Verzeichnisstruktur:

root/
root/font-awesome/4.4.0/css/font-awesome.min.css
root/font-awesome/4.4.0/fonts/fontawesome-webfont.*
root/dir1/index.html

wo meine index.html hat:

<link rel="stylesheet" href="../font-awesome/4.4.0/css/font-awesome.min.css">

Ich habe mich dafür entschieden, den Zugriff auf mein Root weiterhin zu verbieten und stattdessen einen weiteren Verzeichniseintrag in meiner Apache-Konfiguration für root / font-awesome / hinzugefügt 

<Directory "/path/root/font-awesome/">
    Allow from all
</Directory>
— user3325776
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.