Font Awesome funktioniert nicht, Symbole werden als Quadrate angezeigt

Sie müssen 2 Klassen haben, die fa-Klasse und die Klasse, die das gewünschte Symbol fa-Twitter, fa-search usw. identifiziert.

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

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

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 es von maxcdn geladen hatte

Dies kann hilfreich sein, check, um sicherzustellen, dass Sie nicht versehentlich die Schriftfamilie auf dem Symbol geändert haben. Wenn Sie die Schriftfamilie des .fa-Elements geändert haben: FontAwesome, wird das Symbol nicht angezeigt. Es ist immer etwas Dummes und Kleines.

Hoffe das hilft jemandem.

Wenn Sie LESS oder SASS verwenden, öffnen Sie die Datei font-awesome.less/sass und bearbeiten Sie die Pfadvariable @fa-font-path: "../font";, die 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;
}

Dasselbe 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;
}

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

Ich habe versucht, das gleiche Problem mit ein paar früheren Lösungen zu lösen, aber sie funktionierten in meiner Situation nicht ... Endlich fügte ich diese beiden Zeilen in HEAD hinzu und es funktionierte:

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

ich verwende Font Awesome 4.3.0 nur das Verlinken von maxcdn funktioniert wie erwähnt hier , 

aber to Host in Ihrem Server, der Fonts und CSS in den gleichen Ordner stellt, funktionierte für mich so

dann einfach die css verlinken:

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

hoffnung hilft jemandem.

Ich hatte dieses Problem. Das Problem war, dass ich einen CSS-Stil für die Schriftfamilie hatte, der die Schrift überschreibt.

Falls Sie mit Maven und Apache Wicket arbeiten, überprüfen Sie auch 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

Check 1) Verwenden Sie einen Package Resource Guard korrekt, um die Schriftartdateien korrekt laden zu können?

Beispiel aus Ihrer Klasse, das WebApplication erweitert:

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

}

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

Beachten Sie insbesondere bei der Verwendung von Maven die Ressourcenfilterung. 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 sich die CSS- und Schriftartdateien befinden.

Weitere Informationen zur Filterung binärer Daten finden Sie 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ären Inhalten wie Bildern! Dies führt höchstwahrscheinlich zu einer beschädigten Ausgabe . Wenn Sie sowohl Textdateien als auch Binärdateien als Ressourcen, 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 ... "

Sie müssen 2 Klassen haben, die Fas-Klasse und die fa-Klasse.

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

// Correct
<i class="fa fa-search"></i>

Dies sollte in der neuen Version 3.0 wesentlich einfacher sein. Am einfachsten ist es, auf das Bootstrap-CDN zu verweisen: http://www.bootstrapcdn.com/?v=01042013155511#tab_fontawesome

Ich hatte dieses Problem und ging jeden Schritt sorgfältig durch ... obwohl ich FA schon lange benutzt habe ... 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!

Wenn es sich bei Ihrem Server um IIS handelt, stellen Sie sicher, dass Sie das richtige MIME hinzufügen, um die .woff-Dateierweiterung bereitzustellen Das korrekte MIME ist application/octet-stream.

Verwenden Sie diesen <i class="fa fa-camera-retro" ></i>, Sie haben keine fa-Klassen definiert 

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

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

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

Ich habe von 3.2.1 zu 4.0.1 gewechselt und der Ordner war font und heißt jetzt fonts.

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.

Ich benutze den Official Font Awesome SASS Ruby Gem und behebte den Fehler, indem ich die folgende Zeile zu meiner application.css.scss hinzufügte

@import "font-awesome-sprockets";

Erläuterung:

Die Font-Awesome-Sprockets-Datei enthält die Assass-Helper-Sass-Funktionen der Sprockets, mit denen der richtige Pfad zur Font-Datei gesucht wird.

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

Der Fehler kann von der Datei "font-awesome.scss" stammen, die im relativen Pfad nach den Zeichensatzdateien sucht.

Remember, um 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

Es funktionierte nicht für mich, weil ich Allow from none Direktive für das Stammverzeichnis in meiner Apache-Konfiguration hatte. So habe ich es zum Laufen gebracht ...

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 dazu entschieden, den Zugriff auf mein Stammverzeichnis nicht zuzulassen, und fügte stattdessen einen weiteren Verzeichniseintrag in meiner Apache-Konfiguration für root/font-awesome/hinzu. 

<Directory "/path/root/font-awesome/">
    Allow from all
</Directory>

So viele Antworten, also füge ich meine Arbeit für mich hinzu (Namen ändern, wenn Sie kein PRO verwenden): .___. In Typografie.los

//
//  Common
//  _____________________________________________

& when (@media-common = true) {
  .lib-font-face(
    @family-name: @font-family-name__fontawsomeregular,
    @font-path: '@{baseDir}fonts/webfonts/fa-regular-400',
    @font-weight: 400,
    @font-style: normal
  );
  .lib-font-face(
    @family-name: @font-family-name__fontawsomelight,
    @font-path: '@{baseDir}fonts/webfonts/fa-light-300',
    @font-weight: 300,
    @font-style: normal
   );
  .lib-font-face(
    @family-name: @font-family-name__fontawsomebrands,
    @font-path: '@{baseDir}fonts/webfonts/fa-brands-400',
    @font-weight: normal,
    @font-style: normal
  );
  .lib-font-face(
    @family-name: @font-family-name__fontawsomesolid,
    @font-path: '@{baseDir}fonts/webfonts/fa-solid-900',
    @font-weight: 900,
    @font-style: normal
  );
}

In _theme.less

@import '../includes/fontawesome/fontawesome.less';
@fa-font-path: '@{baseDir}fonts/webfonts';

//  Fonts
@font-family-name__fontawsomeregular: 'Font Awesome 5 Pro';
@font-family-name__fontawsomelight: 'Font Awesome 5 Pro';
@font-family-name__fontawsomebrands: 'Font Awesome 5 Brands';
@font-family-name__fontawsomesolid: 'Font Awesome 5 Pro';

und Anwendungsbeispiel:

 .my-newclass:before{
     content: '\f002';
     display: inline-block;
     float: left;
     font-family:  @font-family-name__fontawsomelight;
     font-size: 16px;
}

Die Verwendung von absoluten statt relativen Pfaden löste es für mich. Ich habe relative Pfade benutzt (siehe erstes Beispiel unten) und das hat nicht funktioniert. Ich überprüfte per Konsole und stellte fest, dass der Server eine 404 zurückgegeben hat, Dateien nicht gefunden. 

Relativer Pfad verursacht 404:  

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

Absoluter Pfad gelöst, es ist browserübergreifend gelöst:

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

Ich würde das nicht empfehlen, wenn 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.

Überprüfen Sie die Datei fontawesome-all.css noch einmal - ganz unten befindet sich ein Pfad zum Ordner webfonts. Meiner hatte das Format "../webfonts", was bedeutet, dass die CSS-Datei 1 Ebene nach oben schauen würde. Da sich alle meine CSS-Dateien im Ordner "CSS" befanden und ich die Zeichensätze demselben Ordner hinzugefügt habe, funktionierte dies nicht.

Verschiebe einfach deinen Fonts-Ordner eine Ebene nach oben und alles sollte gut sein :)

Getestet mit Font Awesome 5.0

Wenn Sie font-awesome über den Paketmanager ( yarn oder npm ) installiert haben, müssen Sie wissen, welche Version installiert wurde. Wenn Sie font-awesome bereits vor langer Zeit installiert haben, überprüfen Sie alternativ, welche Version installiert wurde.

Im Wesentlichen können Versionen, die über Paketmanager installiert wurden, hinter der Version zurückliegen, die auf der Website https://fontawesome.com/ angezeigt wird. So wie es heute (21.06.2019) ist, wird Package Manager v4.7.0 als neueste Version installieren. Die Website verweist jedoch auf die Dokumentation, auf die verwiesen wird v5. * .

Lösung: Besuchen Sie die Website, die Symbole für v4.7.0https://fontawesome.com/v4.7. dokumentiert. Kopieren Sie das entsprechende Symbol, z. <i class="fa fa-sign-in" aria-hidden="true"></i> und baue es in dein HTML ein. Mehr Kontext kann gefunden werden hier .

font-weight: 900;

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

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

Ich hoffe es hilft jemandem.

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 aussehen, wenn Sie jetzt die neueste Version verwenden (durch Ihren Ordner ersetzen):

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

In fontawesome 5 können Sie jetzt eine zwischengespeicherte Version von JS über Https bereitstellen. 

<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>

Weitere Informationen zu https://fontawesome.com/get-started/svg-with-js

Mein Problem war das Hinzufügen von 

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

in einem 

<!-- build:css assets/styles/main.css -->
<!-- endbuild -->

etikett

Ich habe es repariert, indem ich es außerhalb des Tags platzierte.

Was das Problem für mich (auf meinem Windows 7-Computer) behoben hat, war die Entschlüsselung meines Projektverzeichnisses. Es ist verrückt, wie viele optische und funktionelle Störungen ursprünglich beim Testen Ihrer Website entstehen. Rufen Sie einfach eine Eingabeaufforderung auf und führen Sie Folgendes aus:

attrib -R %PROJECT_PATH%\*.* /S
cipher /a /d /s:%PROJECT_PATH%

... wobei% PROJECT_PATH% der vollständige Pfadname zu dem Verzeichnis ist, in dem Ihr Code gespeichert ist. 

Verwenden Sie mit der Oberklasse

<div class="container">
  <i class="fa fa-facebook"></i>
</div>

Seit Dezember 2018 finde ich es einfacher, die stabile Version 4.7.0 zu verwenden, die auf bootstrapcdn statt der font-awesome 5.xx cdn auf ihrer Website gehostet wird -, da jedes Mal, wenn sie Nebenversionen der Vorgängerversionen installiert haben brechen.

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

Icons sind gleich:

<i class="fa fa-facebook"></i>

Ich habe einige der obigen Vorschläge ohne Erfolg ausprobiert.

Ich verwende die NuGeT-Pakete . Die (aus irgendeinem Grund) mehrfach benannten Versionen (font-awesome, fontawesome, font.awesome usw.)

Was es wert ist: Ich habe alle installierten Versionen entfernt und nur die neueste Version von font.awesome installiert. font.awesome funktionierte einfach ohne die Notwendigkeit, irgendetwas zu verändern oder zu konfigurieren.

Ich gehe davon aus, dass bei den anderen genannten Versionen einige Dinge fehlen.

Bitte hinzufügen

@import 'https://****.net/*********/font-awesome.min.css';
@font-face {
    font-family: 'FontAwesome';
    src: url('https://****.net/*********/FontAwesome.otf');
    src: url('https://****.net/*********/FontAwesome.otf?#iefix')
}

Hiermit können Sie die CSS-Datei und die Schriftart korrekt herunterladen und verknüpfen. Das Problem liegt daran, dass FontAwesome nicht richtig geladen wird.

Vielen Dank