Font Awesome 5, warum css-Inhalt wird nicht angezeigt?

Ich versuche, mit FontAwesome in den Inhalt der css.

Scheint es mit dem code für das Symbol anstelle des symbols. Ich habe in der online-Hilfe, aber es funktioniert immer noch nicht

css
  @font-face {
  font-family: 'FontAwesome';
  src: url('https://use.fontawesome.com/releases/v5.0.6/css/all.css'); 
}


.fp-prev:before {
    color:#fff;
    content: '/f35a';
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
}
InformationsquelleAutor happycoding | 2018-04-06
  1. 16

    Ersten, werden Sie nur brauchen, um die CSS-Datei Font-Awesome 5 entweder in den head-tag mit:

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

    Oder innerhalb der CSS-Datei:

    @import url("https://use.fontawesome.com/releases/v5.8.1/css/all.css")

    Dann müssen Sie richtig die font-family und die Inhalt wie diese:

    CSS:

    @import url("https://use.fontawesome.com/releases/v5.8.1/css/all.css");

.fp-prev:before {
    color:#000;
    content: '\f35a'; /* You should use \ and not /*/
    font-family: "Font Awesome 5 Free"; /* This is the correct font-family*/
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
}

    HTML:

    <i class="fp-prev"></i>

    Als Anmerkung: die Schriftart Awesome 5 bieten 3 verschiedene font-family für jede Packung von icons:

    Font Awesome 5 Free für die freie Symbole.

    Font Awesome 5 Brands für die Marken-icons wie Facebook, Twitter, etc.

    CSS:

    @import url("https://use.fontawesome.com/releases/v5.8.1/css/all.css");

.fp-prev:before {
    color:#000;
    content: "\f099"; 
    font-family: "Font Awesome 5 Brands";
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
}

    HTML:

    <i class="fp-prev"></i>

    Font Awesome 5 Pro für die Font Awesome Pro

    In einigen Fällen, Sie haben, um den Wert einzustellen der font-weight wie hier beschrieben: Font Awesome 5 auf pseudo-Elemente zeigt Quadrat statt Symbol

    • Das element, das erfordert, dass das Symbol geladen wird als port ein script, so kann ich hinzufügen <i> - tag. ist der i-tag erforderlich?
    • Nein, es ist nicht erforderlich, ich nur verwendet, um die Klasse zu arbeiten ... Sie nur brauchen, um die Klasse zu verwenden
    • perfekt danke, es war der Namen für die schriftart und mich nicht mit der import-css-Datei für die schriftart. funktioniert ein Traum!!!
    • dies funktioniert nicht, wenn das Symbol in einer css-Datei
    • welche Symbole verwenden Sie? dies funktioniert auch, aber sind Sie wahrscheinlich mit einem anderen Problem
    InformationsquelleAutor Temani Afif
  2. -1

    Ich weiß ich bin wirklich spät dran, diese zu beantworten. Aber die akzeptierte Antwort hat mir nicht helfen.
    Nach ein wenig recherche fand ich diese.

    Müssen Sie fügen Sie Fontawesome CSS in den header.

    CDN - 

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

    Wenn Sie heruntergeladen haben die source-Dateien werden dann wie folgt

    <link rel="stylesheet" href="path-to-your-font-awesome-folder/css/all.min.css" />

    Später, müssen Sie die CSS wie folgt - 

    .fp-prev:before {
    color:#000;
    content: '\f35a'; /* replace /with \ */
    font-family: "Font Awesome 5 Free"; /* here is the correct font-family */
    font-style: normal;
    font-weight: 900;
    text-decoration: inherit;
}

    wenn Sie möchten, fügen Sie ihn über <i> tag dann können Sie

    <i class="fas fa-arrow-alt-circle-right"></i>

    Stellen Sie sicher, dass Ihre font-weight 900.

    Finden - https://github.com/FortAwesome/Font-Awesome/issues/11946

    Einem Problem wurde, wuchs in GitHub für das gleiche. Sie haben vorgeschlagen, dass für die Feste schriftart awesome icons der font-weight sollte 900.

    Hoffe, dies wird Ihnen helfen, alle.

    • Sie sagte, die akzeptierten Antworten helfen nicht Sie: können Sie erklären mir die Dinge, die in Ihrer Antwort, die nicht schon gesagt das die akzeptierte Antwort? im Grunde wiederholt sich alles, wenn ich mich nicht Irre
    • Am Ende meiner Antwort, die ich Hinzugefügt habe, einen Hinweis hervorgehoben, um die schriftart zu ändern-Gewicht. Das ist die Veränderung, was ich bin reden über. Die font-weight-Problem ausgelöst wird, in GitHub als gut. Bitte finden Sie den link. Deine Antwort wirklich nicht helfen. Zum ändern der schriftart-Gewicht gearbeitet.
    • Ich hatte das gleiche wiederholen wie geschrieben, in Ihrer Antwort, denn das ist die Art und Weise, wie Sie die Anzeige von icons. Hätte ich nur Hinzugefügt, font-weight, es würde nicht gewesen sein, dass bestimmte. Eh, sorry für die Wiederholung.
    • Ich bin auch mit den Details der font-weight Problem in meiner Antwort am Ende genau so wie Sie es Taten wieder.
    InformationsquelleAutor Prabhu
  3. -2

    Wenn Sie einschließen möchten FontAwesome die von Ihnen angegebene url sollte innerhalb derhead tag als stylesheet Datei: 

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

    Dann können Sie verwenden, Schriftart Genial, wie Sie das getan haben.

    • wir brauchen nicht die schriftart an alle ... einfach die CSS-Datei
    • Entschuldigung, bearbeitet Antwort
    • Er Fragen über font awesome schriftart-Familie.
    InformationsquelleAutor Gobbin
Schreibe einen Kommentar