FontAwesome Symbole werden nicht angezeigt. Warum?

123

Vor kurzem habe ich diese Website entwickelt und versuche, fantastische Symbole für Schriftarten einzufügen, damit sie skalierbar ist.

Die Sache ist, dass sie nicht auftauchen.

Schauen Sie sich den HTML-Code an:

<a class="btn-cta-freequote" href="#">Get a FREE Quote <i class="fa fa-arrow-right"></i></a>

oder

<li><a href="index.html"><span class="fa fa-home fa-2x"></span>Home</a></li>

Ich habe die Stylesheet-Referenz in den Kopf gesetzt.

Ich weiß nicht, warum sie nicht auftauchen.

Hier ist die Referenz:

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

Okay, hier ist das vollständige HTML:

<head>
    <meta charset="UTF-8">
    <title>Retrica</title>
    <link src="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

    <link href="style/normalize.css" rel="stylesheet" type="text/css">
    <link href="style/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="style/main.css" rel="stylesheet" type="text/css">
</head>

<body>
    <header class="top-header">
        <div class="container"><!-- Start Container -->
            <div class="row"><!-- Start Row -->
                <div class="span3"><!-- Start Span3 -->
                    <div class="logo"><img src="img/Retrica.@2x.png" alt="" width="67px" height="13,5px"></div>
                </div><!-- End Span3 -->
                <div class="span9"><!-- Start Span9 -->
                    <nav class="main-nav">  <!-- Start Nav -->

                        <a class="btn-cta-freequote" href="#">Get a FREE Quote <i class="fa fa-arrow-right"></i></a>
                        <ul class="nav-ul"> <!-- Start Unordered List -->
                            <li><a href="index.html"><span class="fa fa-home fa-2x"></span>Home</a></li>
                            <li><a href="#"><span class="fa fa-mobile-phone fa-2x"></span> Contact Us</a></li>

                        </ul> <!-- End Unordered List -->
                    </nav><!-- End Nav -->
                </div><!-- End Span9 -->
            </div><!-- End Row -->
        </div><!-- End Container -->
    </header>

    <section>

        <a href="#" class="btncta">Register Now</a>
    </section>

</body>
html  css  font-awesome 
— Luis Valdez
quelle
1
Funktioniert gut für mich: jsfiddle.net/ZF7x4
— Shahar
— Ciro Santilli 法轮功 冠状 病 六四 六四 法轮功
1
Bitte versuchen Sie es mit einer anderen Version von font-awesome. Zum Beispiel wurden einige Symbole in Version 4.3.0 nicht für mich angezeigt, aber sie wurden in Version 4.7.0 angezeigt.
— Almir Campos
Bitte überprüfen Sie stackoverflow.com/a/55977898/4874281 . Hoffe, es hilft jemandem
— Manian

Antworten:

105

Unter Ihrer Referenz haben Sie Folgendes:

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

Insbesondere das href=Teil.

Unter Ihrem vollständigen HTML-Code steht jedoch Folgendes:

<link src="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

Haben Sie versuchen , Ersatz src=mit href=in Ihrer vollständigen html dies zu werden?

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

Funktioniert für mich: http://codepen.io/TheNathanG/pen/xbyFg

— NathanG
quelle
9
Hinweis : einige Male Sie leere Kisten sehen könnte, dann überprüfen Sie, dass Sie Datei CSS und Schriften in demselben Ordner überprüfen diese , hilft Hoffnung jemand.
— Shaijut
104

Für Suchende fehlender Schriftarten-Symbole habe ich einige Ideen gesammelt:

  • Stellen Sie sicher, dass Sie einen korrekten Link zum CDN verwenden, z.

    <link 
  href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" 
  rel="stylesheet"  type='text/css'>

  • Wenn Ihre Seite HTTPS verwendet, verlinken Sie mit HTTPS auf das schreibfeste CSS (ersetzen Sie es http://durch https://den obigen Link).

  • Stellen Sie sicher, dass AdBlock Plus oder uBlock nicht aktiviert ist. Möglicherweise blockieren sie einige der Symbole.

  • Setzen Sie den Cache Ihres Browsers zurück. (Klicken Sie in Chrome lange auf die Schaltfläche zum erneuten Laden und wählen Sie "Hard Cache Reset".)

  • Stellen Sie sicher, dass das von Ihnen verwendete Element <span>oder <i>die FontAwesomeSchriftfamilie verwendet. Zum Beispiel muss es nicht nur

    <i class="fa-pencil" title="Edit"></i>

    aber

    <i class="fa fa-pencil" title="Edit"></i>

    Es funktioniert nicht, wenn Sie Folgendes in Ihrem CSS haben:

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

  • Wenn Sie IE8 verwenden, verwenden Sie einen HTML5-Shim?

  • Wenn dies nicht funktioniert, finden Sie im Font Awesome Wiki weitere Ideen zur Fehlerbehebung .

— mxro
quelle
3
Ich werde hinzufügen: Überprüfen Sie, ob Ihr .htaccess die Erweiterungen ttf, svg, eot oder woff nicht blockiert
— BassMHL
Schrift überschreibt! Nicht viele Antworten erwähnen diese. Ich habe es überprüft und überprüft und überprüft und es schließlich herausgefunden. Ich bin auch in der Vergangenheit auf dieses Problem gestoßen und wusste nicht warum, aber jetzt weiß ich es.
— Adrianmc
1
Ich habe es versäumt, die Single zuerst faals Klassennamen hinzuzufügen . Vielen Dank. Perfekte Antwort, um das Problem Schritt für Schritt zu finden.
— Kai Noack
Für mich war es etwas anderes, das die Schriftfamilie
— festlegte
Für mich hatte ich "Schriftgröße: 500" (um es mit dem von mir verwendeten Thema in Einklang zu bringen). Ich musste es auf "Schriftgröße: fett"
— einstellen
23

Zuerst konnte ich das nicht mit Font Awesome 5 zum Laufen bringen :

<i class="fa fa-sort-down"></i>

Deshalb bin ich hierher gekommen, weil ich mit der großartigen Schrift nicht vertraut war. Als ich weiter schaute, bemerkte ich, dass mein Problem nur ein Problem mit der Version war.

w3schools hat mir in diesem Fall geholfen.

Neu in Font Awesome 5 ist das fasPräfix, das Font Awesome 4 verwendet fa.

Das s in fassteht für solid , und einige Symbole haben auch einen regulären Modus, der mit dem Präfix angegeben wird far.

Ich habe bereits die verschiedenen Dateien im CSS-Ordner von FontAwesome bemerkt, wie zum Beispiel:

  • all.min.css
  • Marken.min.css
  • fontawesome.min.css
  • regulär.min.css
  • solid.min.css

Und da wurde mir mein Fehler klar. Alles was ich tun musste, war das entsprechende CSS in das HTML aufzunehmen:

<link rel="stylesheet" href="~/lib/Font-Awesome/css/fontawesome.min.css">
<link rel="stylesheet" href="~/lib/Font-Awesome/css/regular.min.css">
<link rel="stylesheet" href="~/lib/Font-Awesome/css/solid.min.css">

Und dann auf den richtigen Artikel verweisen:

<i class="fas fa-sort-down"></i>

Dieses Setup funktioniert bei mir. Obwohl nicht alle Artikel Entsprechungen in jedem Typ haben. Dies wird nicht funktionieren:

<i class="far fa-sort-down"></i>

Nebenbei bemerkt, wenn Sie nicht auf alle separaten Dateien verweisen möchten, reicht dies aus:

<link rel="stylesheet" href="~/lib/Font-Awesome/css/fontawesome.min.css">
<link rel="stylesheet" href="~/lib/Font-Awesome/css/all.min.css">
— Ruard van Elburg
quelle
Außerdem zeigt das Cheatsheet , welche Elemente für jeden Symboltyp verfügbar sind.
— Ruard van Elburg
12

Meins funktionierte nicht, weil ich ein Symbol wollte, das in der von mir verwendeten FA-Version nicht veröffentlicht wurde.

Dies beantwortet, warum einige Symbole angezeigt werden, andere jedoch nicht.

Ziemlich offensichtlich, aber ich denke, einige Leute fallen immer noch darauf herein. Wie ich.

— Taiguara Andrade
quelle
4
Ja, es gibt eine Antwort auf die Frage.
— Bobort
2
Oder Sie versuchen, eine ältere Schriftart zu verwenden, die in der von Ihnen verwendeten Version nicht mehr vorhanden ist. Dieser wird zum Beispiel nur Zeitkreis genannt, nicht
— Zeitkreis
1
Danke dir!! Dies hat mich den ganzen Tag an meinen Haaren ziehen lassen
— 24x7
5

Sie müssen https für maxcdn.bootstrapcdn.com verwenden. Nur https auf maxcdn unterstützen CORS

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="screen" />
— Chatchawan Wongsiriprasert
quelle
4

Ich habe dieses Problem gelöst, indem ich das Fonts-Verzeichnis auf die gleiche Ebene wie meine CSS-Dateien gebracht habe.

— lolo
quelle
3

Wer auch immer in 2018. Diese werden Überprüfung kann ich verwende Schriftart ehrfürchtige 4.7.0 und ich habe dieses Problem , indem man einfach heraus gelöst die sin faswie in den Code zu sehen <i class="fa fa-[icon-name]"></i>. Das war ursprünglich<i class="fas fa-[icon-name]"></i> .

Hoffe das hilft.

— Viel Glück Leo
quelle
Außerdem verwende ich den Server node.js.
— Goodluck Leo
Neu in Font Awesome 5 ist das fas-Präfix, Font Awesome 4 verwendet fa. Von w3schools
— Ruard van Elburg
2

Fügen Sie einfach einige weitere Informationen zu den obigen Antworten in Bezug auf das Update auf fontawesome hinzu.

Wenn Sie font awesome 5 verwenden,

ein. Kopieren Sie einfach den folgenden HTML-Code, um ihn einzufügen.

<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js" integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ" crossorigin="anonymous"></script>

Hinweis: Es ist besser, alle Ihre Skripte in <body> {YOUR_SCRIPT_HERE}</body>und kurz zuvor (YOUR_CLOSING_BODY) aufzunehmen.

b. Und zum Beispiel:

<li><a href="https://stackoverflow.com/users/{USER}" class="social-icons"><i class="fab fa-stack-overflow"></i></a></li>
— Sundar Gsv
quelle
Wie wäre es, das CSS lokal zu bedienen, anstatt auf die fa-Website zu verlinken?
— Ghilteras
Das war mein Fall ... Ich hatte keine JS-Datei, jetzt funktioniert es!
— Cristian Sepulveda
2

Das Hinzufügen funktionierte für mich:

<link href="https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" rel="stylesheet">

Schau mal

Das vollständige Beispiel lautet:

<link href="https://github.com/FortAwesome/Font-Awesome/blob/master/web-fonts-with-css/css/fontawesome.css" rel="stylesheet">
<a class="btn-cta-freequote" href="#">Compute <i class="fa fa-calculator"></i></a>
Erweitern Sie das Snippet

— edgarmtze
quelle
2

Wenn Sie benutzerdefiniertes CSS definieren, müssen Sie font-weight: 900;eine neuere Font Awesome-Bibliothek (ab Version 5) festlegen . Wenn Sie diese Schriftgröße nicht einstellen, werden möglicherweise Quadrate angezeigt.

— jurev
quelle
2

Anmerkungen

Diese Antwort wird erstellt , wenn die neueste Version von fontawesome ist v5. * Aber Garn und npm Version Punkte auf v4. * (2019.06.21). Mit anderen Worten, Versionen, die über Paketmanager installiert wurden, stehen hinter der neuesten Version!

Wenn Sie font-awesomeüber den Paketmanager ( Garn oder npm ) installiert haben, beachten Sie bitte, welche Version installiert wurde. Wenn Sie bereits vor font-awesomelanger Zeit installiert haben, überprüfen Sie alternativ, welche Version installiert wurde.

Installation von font-awesome als neue Abhängigkeit:

$ yarn add font-awesome
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ font-awesome@4.7.0
info All dependencies
└─ font-awesome@4.7.0
Done in 3.32s.

Überprüfen, welche Version von font-awesome bereits installiert ist:

$ yarn list font-awesome
yarn list v1.16.0
warning Filtering by arguments is deprecated. Please use the pattern option instead.
└─ font-awesome@4.7.0
Done in 0.79s.

Problem

Nachdem Sie die font-awesomeAbhängigkeit installiert haben, fügen Sie eine dieser beiden Quelldateien font-awesome.cssoder font-awesome.min.css(gegründet in node_modules/font-awesome/css/) den Header Ihrer Webseite ein, z

<head>
  <link type="text/css" rel="stylesheet" href="css/font-awesome.css">
</head>

Als nächstes besuchen Sie https://fontawesome.com/ . Sie wählen kostenlose Icons und Sie suchen Sign-in - Symbol (als Beispiel). Sie kopieren das Symbol, z. B. <i class="fas fa-sign-in-alt"></i>fügen Sie es in Ihr HTML ein und das Symbol wird nicht angezeigt oder als Quadrat oder Rechteck angezeigt!

Lösung

Im Wesentlichen stehen Versionen, die über Paketmanager installiert werden, hinter der Version, die auf der Website https://fontawesome.com/ angezeigt wird . Wie Sie sehen können, haben wir font-awesome v4.7.0aber installiert , Website zeigt Dokumentation für font-awesome v5.*. Lösung: Besuchen Sie die Website, auf der Symbole für v4.7.0 https://fontawesome.com/v4.7.0 dokumentiert sind , kopieren Sie das entsprechende Symbol, z. B. <i class="fa fa-sign-in" aria-hidden="true"></i>und fügen Sie es in Ihr HTML ein.

— Lukasz Dynowski
quelle
Sie haben ein neues Paket veröffentlicht hier , die die neueste Version hat. Es ist auch kompatibel mit weniger und sass \ o /
— DerpyNerd
2

Für Version 5:

Wenn Sie das kostenlose Paket von dieser Website heruntergeladen haben:

https://fontawesome.com/download

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

Ihre Referenz sieht also ungefähr so ​​aus:

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

Die Datei fontawesome.css enthält keine Schriftreferenz.

— Live-Liebe
quelle
1

Wenn Sie Blogger-Hosting verwenden, verwenden Sie dieses URL-Stylesheet CSS:

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
— Nurdin BM.
quelle
1

Probieren Sie die beiden folgenden Links aus, die im Header-Tag enthalten sind.

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

Abrufen der Symbole über den folgenden Link:

<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/3.2.1/assets/font-awesome/css/font-awesome.css">
— Kirsche
quelle
1

Ich benutze:

<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">
<a class="icon fa-car" aria-hidden="true" style="color:white;" href="http://viettelquangbinh.com"></a>

und Stil nach:

.icon::before {
display: inline-block;
margin-right: .5em;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
}
— Tran Anh Hien
quelle
1

Der CDN-Link, den Sie gepostet haben, ist vermutlich der Grund, warum er nicht richtig angezeigt wurde. Sie können diesen unten verwenden. Er funktioniert perfekt für mich.

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
Erweitern Sie das Snippet

— John Kesh Mahugu
quelle
0

Stellen Sie sicher, dass Sie rel und type wie in "rel =" stylesheet "type = 'text / css'" in den Link zur CSS-Datei awesomefont aufnehmen. Ohne diese wurde die Datei für mich nicht richtig geladen.

— Elliot Robert
quelle
0

Sie können dies in der .htaccess-Datei im Verzeichnis der fantastischen Schriftart hinzufügen

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/woff .woff
AddType font/woff .woff2
AddType font/otf .svg

<FilesMatch "\.(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>
— Waleed Hakim
quelle
0

Ich habe getestet und es funktioniert.

An Stelle von

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

Verwenden Sie es mit HTTPS

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
— Atif Tariq
quelle
-1

Sie benötigen einen Schriftimporter Versuchen

<style> 
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css););
</style>
— SIAMWEBSITE
quelle
-2

Ich habe meine zum Arbeiten gebracht, indem ich die Hauptdatei font-awesome.css bearbeitet habe. Es hat URLs zum src (woff, eot, etc ...) Ich musste sie in den absoluten Pfad ändern, zB: http://mywebsite.com/font-awesome.woff Dann hat es funktioniert!

— kristallove18
quelle
2
Ich würde dies lieber nicht empfehlen, da Sie eine externe Datei bearbeiten. Sie (oder Ihr Team) müssen sich dies jedes Mal merken, wenn sie fontawesome aktualisieren müssen.
— J Cordero
-6

Ändere das:

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

Dazu:

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

Ich glaube, Sie brauchen das, http:sonst weiß es nicht, welches Protokoll zu verwenden ist (und verwendet daher file:zum Beispiel das falsche ).

— Shahar
quelle
@ user3870894 Eigentlich ist es href, ich dachte an Javascript. Aber probieren Sie den neuen Code.
— Shahar
@ user3870894 o_o Poste dann den vollständigen HTML-Code oder zumindest die Hauptteile. Was sagt die Konsole? Haben Sie versucht, das Element zu untersuchen?
— Shahar
2
@Shahar Mithilfe //des Browsers wird das Protokoll ausgewählt, das die anfordernde Site verwendet. Wenn Ihre Site https verwendet, wählt sie https aus. Wenn Sie http verwenden, wird http verwendet, um die Datei vom CDN anzufordern. Wenn Sie die Site lokal mit öffnen file:///, was nicht empfohlen wird, versucht der Browser natürlich tatsächlich, die CDN mit dem fileProtokoll zu öffnen .
— Robin van Baalen
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.