it-swarm.com.de

Font Awesome funktioniert nicht, Symbole werden als Quadrate angezeigt

Ich versuche also, eine Marketing-Seite zu prototypisieren und benutze 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 dargestellt 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 versuchte, ein Symbol zu verwenden:

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

Aber das wird alles in einem großen Quadrat dargestellt. Weiß jemand, was los sein könnte?

176
Connor Black

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

133
mayhewr

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>
166
Nabil Kadimi

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

40
Kumar Deepam

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.

31
Bren1818

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;
}
21
jonschlinkert

Ö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">
16
Erga Kandly

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

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

enter image description here

dann einfach die css verlinken:

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

hoffnung hilft jemandem.

9
stom

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

7
Jonny White

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

6
Philipp

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>
4
israel

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

4
Font Awesome

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!

4
J Doe

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.

3
Dario Brignone

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

2

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

2
tronic

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");
}
2
SantoshK

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.

1
André Duarte

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.

1
Marklar

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

1
vilsbole

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>
0
user3325776

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;
}
0
BartZalas

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.

0
Tim

Ü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

0
Ross

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 .

0
Lukasz Dynowski

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.

0
manian

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">
0
live-love

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

0
desertSniper87

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.

0
Alex Burdusel

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. 

0

Verwenden Sie mit der Oberklasse

<div class="container">
  <i class="fa fa-facebook"></i>
</div>
0
HQtunes.com

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>
0
ehacinom

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.

0
Danie Schoeman

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

0
subindas pm