Font Awesome-Symbole funktionieren nicht, ich habe alle erforderlichen Dateien hinzugefügt [closed]

Question 1

Ich versuche, Font Awesome-Symbole der Version zu verwenden 4.1.0 auf meiner Website, aber sie funktionieren nicht, ich habe sie in der verwiesen head meiner Seite.

Ich habe es mit zwei Methoden versucht.

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

<li><a href="index.html">Home</a></li>

Hier ist der CDN-Link, den ich verwende:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

Hier ist der vollständige HTML-Code:

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

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

Question 2

Für Suchende nach fehlenden Font-genialen Icons habe ich ein paar Ideen gesammelt:

Stellen Sie sicher, dass Sie einen korrekten Link zum CDN verwenden, wie zum Beispiel:

<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 (ersetzen Sie http:// mit https:// im Link oben).

Vergewissern Sie sich, dass Sie AdBlock Plus oder uBlock nicht aktiviert haben. Sie blockieren möglicherweise einige der Symbole.
Setzen Sie Ihren Browser-Cache zurück. (Klicken Sie in Chrome laaange auf die Schaltfläche „Neu laden“ und wählen Sie „Hard Cache Reset“)
Stellen Sie sicher, dass die  oder  Element, das Sie verwenden, verwendet die FontAwesome Schriftfamilie. Zum Beispiel muss es nicht nur
```

```
aber
```

```
Es funktioniert nicht, wenn Sie etwas wie das Folgende 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 Ideen zur Fehlerbehebung im Font Awesome Wiki.

Question 3

Unter Ihrer Referenz haben Sie Folgendes:

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

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

Hast du versucht zu ersetzen src= mit href= in Ihrem vollständigen HTML, um dies zu werden?

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

Funktioniert bei mir: http://codepen.io/TheNathanG/pen/xbyFg

Question 4

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

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

Deshalb bin ich hierher gekommen, da ich mit Font Awesome nicht vertraut bin. Als ich weiter nachsah, bemerkte ich, dass mein Problem lediglich ein Problem mit der Version war.

w3schools hat mir in diesem Fall weitergeholfen.

Neu in Font Awesome 5 ist die fas Präfix, das Font Awesome 4 verwendet fa.

Die Sünde fas steht für festund einige Symbole haben auch ein
regulär Modus, angegeben durch Verwendung des Präfixes 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
regular.min.css

solid.min.css

Und da erkannte ich meinen Fehler. Alles, was ich tun musste, war, das entsprechende CSS in das HTML einzufügen:

<link rel="stylesheet" href="https://stackoverflow.com/questions/24922833/~/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>

Diese Einstellung funktioniert bei mir. Obwohl nicht alle Gegenstände in jedem Typ Äquivalente haben. Das wird nicht funktionieren:

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

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

<link rel="stylesheet" href="https://stackoverflow.com/questions/24922833/~/lib/Font-Awesome/css/fontawesome.min.css">
<link rel="stylesheet" href="~/lib/Font-Awesome/css/all.min.css">

Question 5

Meins funktionierte nicht, weil ich ein Symbol haben 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.

Question 6

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

Wenn Sie die Schriftart Awesome 5 verwenden,

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

Notiz: Es ist besser, alle Ihre Skripte in die einzufügen <body> {YOUR_SCRIPT_HERE}</body> und kurz vor (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>

Question 7

Ich habe das ähnliche Problem, zeigt Symbole im Quadrat, habe es gemäß den hier angegebenen Anweisungen versucht: https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

Gelöst durch Verwendung dieser Referenz im Head-Abschnitt der HTML-Seite

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">

Question 8

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