it-swarm.com.de

FontAwesome-Symbole werden nicht angezeigt. Warum?

Vor kurzem habe ich diese Website entwickelt und versuche, fantastische Symbole für die Schriftart hinzuzufügen, also ist sie skalierbar.

Die Sache ist, dass sie nicht auftauchen.

Schauen Sie sich die HTML 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 im Kopf eingefügt.

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 die 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/[email protected]" 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>

        <h1>The greatest way to contact those you love</h1>
        <h3>In a way you don't imagine</h3>

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

</body>
67
Luis Valdez

Unter Ihrer Referenz haben Sie Folgendes:

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

Insbesondere der href=-Teil.

Unter Ihrer vollständigen HTML-Datei steht jedoch Folgendes:

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

Haben Sie versucht, src= durch href= in Ihrer vollständigen HTML zu ersetzen, um 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

77
NathanG

Für Suchende von fehlenden Schriftbildern habe ich ein paar Ideen zusammengestellt:

  • 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, verknüpfen Sie mithilfe von HTTPS mit dem font-awesome CSS (ersetzen Sie http:// durch https:// im obigen Link).

  • Vergewissern Sie sich, dass AdBlock Plus oder uBlock nicht aktiviert ist. Sie blockieren möglicherweise einige der Symbole.

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

  • Stellen Sie sicher, dass das von Ihnen verwendete <span>- oder <i>-Element die Schriftfamilie FontAwesome verwendet. Zum Beispiel muss es nicht gerecht werden

    <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 ein HTML5-Shim?

  • Wenn dies nicht funktioniert, gibt es weitere Tipps zur Fehlerbehebung im Font Awesome Wiki.

76
mxro

Meine 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, dass einige Leute immer noch darauf hereinfallen. Wie ich.

6

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

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

Für wen auch immer dies 2018 ausprobiert werden kann. Ich verwende Font Awesome 4.7.0 und dieses Problem wurde gelöst, indem einfach die Variable s in fas entfernt wurde, wie im Code <i class="fa fa-[icon-name]"></i> angegeben. Dies war ursprünglich <i class="fas fa-[icon-name]"></i>

Hoffe das hilft.

2
Goodluck Leo

dies funktionierte für mich:

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

Schau mal

so ein volles Beispiel ist:

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

2
cMinor

Ich habe dieses Problem gelöst, indem ich das Fonts-Verzeichnis auf dieselbe Stufe wie meine CSS-Dateien gestellt habe.

2
lolo

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'/>
1
Nurdin BM.

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

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

Das ist der Grund, warum ich hierher gekommen bin, weil ich mich mit Schriften nicht auskenne. 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 Präfix fas, in Font Awesome 4 wird fa verwendet.

Das s in fas steht für solid , und einige Symbole haben auch einen regular -Modus, der mit dem Präfix far angegeben wird.

Die verschiedenen Dateien im FontAwesome-CSS-Ordner sind mir bereits aufgefallen:

  • all.min.css
  • brands.min.css
  • fontawesome.min.css
  • regular.min.css
  • solid.min.css

Und da wurde mir mein Fehler klar. Alles was ich tun musste, war das passende CSS zum HTML-Code hinzuzufügen:

<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 das richtige Element verweisen:

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

Dieses Setup funktioniert bei mir. Es sind jedoch nicht alle Artikel in jedem Typ gleichwertig. Das wird nicht funktionieren:

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

Wenn Sie nicht auf alle separaten Dateien verweisen möchten, ist Folgendes ausreichend:

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

Wenn Sie ein benutzerdefiniertes CSS definieren, müssen Sie font-weight: 900; für eine neuere Font Awesome-Bibliothek (ab Version 5) festlegen. Wenn Sie dieses Schriftgewicht nicht festlegen, werden möglicherweise Quadrate angezeigt.

1
jurev

Ich konnte Font Awesome mithilfe der Datei all.min.css zum Laufen bringen.

1
Rob Breidecker

Versuchen Sie es mit den beiden folgenden Links im Header-Tag.

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

Erhalten Sie die Icons über den folgenden Link:

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

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">
0
Atif Tariq

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>
0
Waleed Hakim

der CDN-Link, den Sie gepostet haben, ist der Grund, warum er nicht richtig angezeigt wurde. Sie können diesen Link unten verwenden.

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

0

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);
}
0
Tran Anh Hien

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

0
Elliot Robert

Für Version 5:

Wenn Sie das kostenlose Paket von dieser Website heruntergeladen haben:

https://fontawesome.com/download

Die Schriftarten befinden sich in der Datei all.css und all.min.css . Datei.

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.

0
live-love

Fügen Sie einfach weitere Informationen zu den obigen Antworten in Bezug auf die Aktualisierung von fontawesome hinzu.

Wenn Sie Font Awesome 5 verwenden, 

ein. Kopieren Sie einfach den unten stehenden HTML-Code,

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

Hinweis: Besser alle Skripte in den <body> {YOUR_SCRIPT_HERE}</body> und kurz davor einbinden (YOUR_CLOSING_BODY)

b. Und zum Beispiel

<li><a href="https://stackoverflow.com/users/{USER}" class="social-icons"><i class="fab fa-stack-overflow"></i></a></li>
0
Sundar Gsv

Anmerkungen

Diese Antwort wird erstellt, wenn die neueste Version von fontawesome v5 ist. * aber Wolle und - npm Version zeigt auf v4. * (21.06.2019). Mit anderen Worten, Versionen, die über Paketmanager installiert wurden, stehen hinter der neuesten Version!

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.

Installieren von font-awesome als neue Abhängigkeit:

$ yarn add font-awesome
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ [email protected]
info All dependencies
└─ [email protected]
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.
└─ [email protected]
Done in 0.79s.

Problem

Nachdem Sie font-awesome Dependency installiert haben, fügen Sie eine dieser beiden Quelldateien font-awesome.css oder font-awesome.min.css (gegründet in node_modules/font-awesome/css/) in den Header ein Ihrer Webseite zB.

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

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

Lösung

Im Wesentlichen stehen Versionen, die über Paketmanager installiert wurden, hinter der Version, die auf der Website https://fontawesome.com/ angezeigt wird. Wie Sie sehen, haben wir font-awesome v4.7.0 installiert. Auf der Website wird jedoch die Dokumentation für font-awesome v5.* angezeigt. 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.

0
Lukasz Dynowski